前端基础——CSS3

最新推荐文章于 2024-04-23 16:26:38 发布
最新推荐文章于 2024-04-23 16:26:38 发布
阅读量798 收藏 2
点赞数 2
分类专栏： # 前端基础 文章标签： 前端 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63373917/article/details/122622585
版权

CSS3

CSS3边框

新边框属性：
border-image 设置所有边框图像的速记属性。

border-radius 设置所有四个边框半径属性的属性。
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角。
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角。
一个值： 四个圆角值相同。

border-shadow 附加一个或多个下拉框的阴影。

CSS3背景

background-image 添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。（可以给不同的图片设置多个不同的属性）

background-size 指定背景图像的大小。

background-origin 指定了背景图像的位置区域。

background-clip 从指定位置开始绘制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        #rcorners1
        {
            background-image: url("140434.png");
            background-position: right bottom,top;
            background-repeat: no-repeat, repeat;
            padding: 100px;
        }
    </style>

</head>
<body>
<p id="rcorners1">

</p>

</body>
</html>

CSS3渐变

CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）：由它们的中心定义

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
方向：to bottom、to top、to right、to left、to bottom right等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        #rcorners1
        {
                height: 200px;
                background-color: red;
                background-image: linear-gradient(#e66465, #9198e5)
        }
    </style>

</head>
<body>
<p id="rcorners1"></p>

</body>
</html>

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        #rcorners1
        {
                height: 200px;
                width: 500px;
                background-color: red;
                background-image: radial-gradient(#e66465 50%, #9198e5 30%)
        }
    </style>

</head>
<body>
<p id="rcorners1"></p>

</body>
</html>

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色节点。
rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

CSS3阴影

text-shadow属性适用于文本阴影。指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
 h1{
     text-shadow:5px 5px 5px yellow;
 }
    </style>

</head>
<body>
<h1>
    今天很开心。
</h1>

</body>
</html>

box-shadow 属性适用于盒子阴影。
box-shadow 属性用来可以创建纸质样式卡片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        div
        {
            width: 200px;
            height: 100px;
            background-color: pink;
            box-shadow: 10px 10px 5px gray;
        }
    </style>

</head>
<body>
<div></div>

</body>
</html>

CSS3字体

font-family 规定字体的名称。值为name.
src 定义字体文件的 URL。值为url.
font-stretch 定义如何拉伸字体。默认是 “normal”。
font-style 定义字体的样式。默认是 “normal”。
font-weight 定义字体的粗细。默认是 “normal”。

CSS3 2D转换

  1. translate() 方法
    translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
    eg. translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        div
        {
            width: 200px;
            height: 100px;
            background-color: pink;
            border :1px solid cornflowerblue;
        }
        div#div2
        {
            transform:translate(50px,100px);
        }
    </style>

</head>
<body>
<div>Hello.</div>
<div id="div2">Hi.</div>
</body>
</html>
  1. rotate() 方法
    rotate()方法，在一个给定度数顺时针旋转的元素。(当值为负值时，元素逆时针旋转.)
    eg. rotate值（30deg）元素顺时针旋转30度。
       div#div2
        {
            transform:rotate(30deg);
        }
  1. scale() 方法
    scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
    scale（2,3）转变宽度为原来的2倍，宽度变为原来的3倍。
        div
        {
            margin: 150px;
            width: 200px;
            height: 100px;
            background-color: pink;
            border :1px solid cornflowerblue;
            transform: scale(2,3);
        }
  1. skew() 方法
    skew() 方法包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

CSS3 3D转换

  1. rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
  2. rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
  3. rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。

CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
需要指定要添加效果的CSS属性与效果的持续时间。
如果未指定期限，transition将没有任何效果，因为默认值是0。
要添加多个样式的变换效果，添加的属性由逗号分隔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        div
        {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: width 2s,height 2s,transform 2s;
        }
        div:hover{
            width: 200px;
            height: 200px;
            transform: rotate(180deg);
        }
    </style>

</head>
<body>
<div>Hello.</div>

</body>
</html>

CSS3 动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
要创建 CSS3 动画，需要了解 @keyframes 规则。
当在 @keyframes 创建动画，指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称及规定动画的时长，否则动画不会有任何效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        div
        {
            width: 200px;
            height: 100px;
            background: pink;
            position: relative;
            animation: myfirst 5s linear 2s infinite alternate;
        }
        @keyframes myfirst
        {
            0% {background: red;left: 1px;top:1px;}
            25% {background: dodgerblue;left: 200px;top:1px;}
            50% {background: pink;left: 200px;top:200px;}
            75% {background: gold;left: 1px;top:200px;}
            100% {background: red;left: 1px;top:1px;}
        }

    </style>

</head>
<body>
<div>Hello.</div>

</body>
</html>

CSS3 多列

多列属性：
css3 多列属性

CSS3 用户界面

  1. 调整尺寸
    resize属性指定一个元素是否应该由用户去调整大小。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        div
        {
            border: 2px solid;
            padding: 10px 40px;
            width: 300px;
            resize: both;
            overflow: auto;
        }

    </style>

</head>
<body>
<div>Hello.</div>

</body>
</html>
  1. 调整方框大小
    box-sizing 属性允许用户以确切的方式定义适应某个区域的具体内容。
    box-sizing: content-box (默认): 高度和宽度只应用于元素的内容。
    box-sizing: border-box: 高度和宽度应用于元素的所有部分: 内容、内边距和边框。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        #example1
        {
            box-sizing: content-box;
            width: 300px;
            height: 100px;
            padding: 30px;
            border: 10px solid lightpink;
        }

        #example2
        {
            box-sizing: border-box;
            width: 300px;
            height: 100px;
            padding: 30px;
            border: 10px solid lightpink;
        }
    </style>

</head>
<body>

<div id="example1">今天天气好晴朗。</div>
<div id="example2">今天天气好晴朗。</div>
</body>
</html>

在这里插入图片描述

  1. 外形修饰
    outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
    （轮廓不占用空间、轮廓可能是非矩形）
div
{
    margin: 20px;
    width: 100px;
    padding: 10px;
    height: 70px;
    border: 2px solid black;
    outline: 2px solid red;
    outline-offset: 15px;
}

CSS3 按钮

  1. 使用 background-color 属性来设置按钮颜色
  2. 使用 font-size 属性来设置按钮大小
  3. 使用 border-radius 属性来设置圆角按钮
  4. 使用 border 属性设置按钮边框颜色
  5. 使用 hover 选择器来修改鼠标悬停在按钮上的样式
  6. 使用 box-shadow 属性来为按钮添加阴影
<!DOCTYPE html>
<html lang="ss">
<head>
    <meta charset="utf-8">
    <title>第一个网页</title>
    <style>
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 16px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            cursor: pointer;
            float: left;

        }

        .button1 {
            background-color: white;
            border-radius: 4px;
            color: black;
            border: 2px solid #4CAF50;
        }

        .button1:hover {
            background-color: #4CAF50;
            color: white;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        }

    </style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button1">Button</button>
<button class="button button1">Button</button>
<button class="button button1">Button</button>


</body>
</html>

CSS3 弹性盒子

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器内包含了一个或多个弹性子元素。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

  1. flex-direction 属性指定了弹性子元素在父容器中的位置。
    在这里插入图片描述
  2. justify-content 属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>第一个网页</title>
    <style>
        .ss{
            display: flex;
            justify-content: center;
            width: 400px;
            height: 250px;
            background-color: darkseagreen;
        }
        .sss{
            background-color: blue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="ss">
    <div class="sss">item1</div>
    <div class="sss">item2</div>
    <div class="sss">item3</div>
</div>

</body>
</html>
  1. align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>第一个网页</title>
    <style>
        .ss{
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 250px;
            background-color: darkseagreen;
        }
        .sss{
            background-color: blue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="ss">
    <div class="sss">item1</div>
    <div class="sss">item2</div>
    <div class="sss">item3</div>
</div>

</body>
</html>
qingqing今天掉头发了吗
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 实现图片翘边阴影、边框阴影效果代码.rar
07-09
这是一个纯粹的CSS3效果，模拟实现Pseudo-Classes模拟卡片翘边阴影效果、方框边框阴影效果，IE8及以下浏览器对CSS3不感冒，童鞋们就不要试了，但完美支持ie9、chrome、safari、firefox、opera、360等浏览器。也算是为学习CSS3的朋友共享一份参考资料吧。
10个实用的CSS样式之悬浮卡片
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
10-23 8032
对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是悬浮卡片首先我们来看看最终的效果到此为止一个简单的悬浮卡片就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得哈。
用 CSS 设计漂亮的阴影，css阴影和原理，所有知识点多图动画演示
geek word
12-02 8207
以我的拙见，最好的网站和 Web 应用程序对它们具有切实的“真实”品质。实现这种质量涉及很多因素，但阴影是一个关键因素。 但是，当我环顾网络时，很明显大多数阴影并不像它们应有的那样丰富。网络被模糊的灰色框覆盖，看起来并不像阴影。 在本教程中，我们将学习如何将典型的框阴影转换为美丽的、栩栩如生的阴影： 目标受众 本教程适用于有一些 CSS 基础知识的开发人员。 为什么要使用阴影？ 我保证，我们很快就会接触到有趣的 CSS 技巧。但首先，我想退后一步，谈谈为什么CSS 中存在阴影，以及我们如何使用它们来达到最大
常见需求：CSS 实现弧形卡片的 3 种方式
weixin_45727472的博客
02-27 1081
以上就是本文的全部内容了，共介绍了 3 种不同的方式，下面总结一下各自优缺点border-radius 支持斜杠语法，可以单独控制圆弧的x、y半径，实现“外凸”圆弧最简单，缺点是圆弧不能自定义弧度，也不能实现“内凹”效果伪元素最符合常规思维，可以解决以上问题，缺点是需要占用伪元素，略微麻烦渐变实现和伪元素拼接思路类似，缺点是语法复杂，需要熟练掌握渐变语法大家可以根据自己的实际场景自行选择适当的方式，当然最好都能够掌握，这样碰到类似需求时才能游刃有余，如果你有其他的思路，欢迎留言讨论。
11个使用CSS制作产品展示卡片样例
热门推荐
#include
03-13 1万+
作者：John Mantas 使用技术：HTML / CSS (SCSS) 是否自适应：否 依赖库：- 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari 源码链接：https://codepen.io/john-mantas/full/bxmrBq 作者：George Gedox 使用技术：HTML / CSS (SCSS) 是否自适应：否 依赖库：font...
前端样式-卡片01
Anolzo
03-19 3135
运用到的技术： html + css+ js 样式： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
前端布局小案例，分享3个漂亮的卡片组件
前端达人
03-24 3080
当今互联网发展迅猛，各种应用、网站和软件层出不穷，其中前端技术的发展更是让人瞩目。随着用户对于界面设计的要求越来越高，漂亮的卡片组件在各类网页设计中变得越来越流行。本文将分享三个精美的卡片组件，帮助您在前端开发中轻松实现优秀的界面设计。卡片一：个人介绍卡片如下图所示，这种个人介绍的卡片，想必我们都做，效果图如下，如果是你，会怎么实现呢？以下是相关的代码实现HTML部分：<div class=...
好看的css卡片样式
qq_43653355的博客
02-24 1037
【代码】好看的css卡片样式。
html旅游网页设计代码_11个Html和CSS 动态网页背景免费代码案例
weixin_39743622的博客
12-01 8559
作者：Vaibhav Arora使用技术：HTML (Haml) / CSS依赖库：-浏览器兼容：Chrome, Edge, Firefox, Opera, Safari源码链接：https://codepen.io/vaibhavarora/pen/xmpxjp作者：Rob DiMarzo使用技术：HTML (Pug) / CSS (SCSS)依赖库：-浏览器兼容：Chrome, Firefox...
css卡片样式1
qq_45717424的博客
12-25 1610
css卡片样式1（改codepen）： 内容有五个，这里只展示了一个 html代码： <div class="slide-container"> <div class="wrapper"> <div class="clash-card barbarian"> <div class="clash-card__image clash-card__image--barbarian".
卡片式列表（Card List）CSS样式效果
gamenoover的博客
03-23 6028
页面效果如下： Html + Css代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
web前端基础——CSS入门
01-20
web前端基础——CSS入门 1.css的引入方式 内部样式： 直接在style里面写 内联样式： 外部样式表 2.css选择器 id选择器： #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以...
前端HTML5 css基础
03-09
前端HTML5 css基础
前端学习（二）——css3学习
08-09
前端学习（二）——css3学习
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
狂神说——CSS3最新教程快速入门通俗易懂
05-26
狂神说——CSS3最新教程快速入门通俗易懂 代码笔记
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 471
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 630
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 678
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
Web前端开发技术——HTML,CSS,JavaScript 答案
05-20
3. JavaScript：一种编程语言，用于为网页添加交互性和动态效果。 这三种技术是构建现代 Web 应用程序的基础。HTML 提供了页面的结构，CSS 提供了页面的样式和布局，而 JavaScript 则为页面添加了交互性和动态效果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值