CSS3常用属性及效果汇总

最新推荐文章于 2024-10-01 23:54:35 发布
最新推荐文章于 2024-10-01 23:54:35 发布
阅读量1.4w 收藏 140
点赞数 20
分类专栏： CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyznice/article/details/54142281
版权

CSS3增加的新的属性和新属性值很多，其中的重点，比如Flex布局，2D3D效果，关键帧动画等，我们会在其他篇拿出来详细讲解，并附上实例和代码，供大家参考学习。本文只介绍其他常用且兼容性良好（IE9及以上）的一部分内容
水平有限，如有错漏，希望能在评论区留言，便于我更正，内容不定时更新，转载注明请出处，谢谢。

一、边框

1.1 border-radius 圆角

这里写图片描述

1、border-radius的值可以为绝对单位px，和相对单位em，rem，也可以为百分比，值越大，弧度越大。
2、属性值位数不同时，表现也不同，具体可以参考图片。
3、你也可以设置单个角的弧度，比如border-top-right-radius:5px；border-bottom-left-radius:5px。

1.2 box-shadow 阴影

这里写图片描述

1、box-shadow: X轴偏移值 Y轴偏移值 X轴阴影模糊半径 Y轴阴影模糊半径 阴影颜色;
2、其中，X轴和Y轴的偏移值可以为负，但不能共用一个，X轴和Y轴的阴影半径可以共用一个，但是不能为负。
3、还需要注意的是，阴影模糊半径是可以不写的，比如box-shadow：10px 10px #ccc；这样，仍然会有阴影，但是就失去了这种模糊朦胧的效果，立体感也大大减弱了，一般不会这么使用。

1.3 box-sizing 属性允许你以特定的方式定义匹配某个区域的特定元素，这话有点绕口，我们结合图来说明。

这里写图片描述

box-sizing:content-box/border-box/inherit

盒模型基本结构如图，当我们设置了宽高，使用了box-sizing属性，
属性值为content-box时，宽高的值为content的宽高；
属性值为border-box时（事实上我们比较常用的就是这个），宽高的值为border+padding+content也就是整个盒模型的宽高；
属性值为inherit时，则从父元素继承box-sizing的值。

二、背景

CSS3中，我们对背景有了更强的控制

2.1 background-image

跟以前不同的是，我们通过background-image来为一个元素添加多张图片，让我们结合代码和效果图来看一下。

这里写图片描述

<div class="box"></div>/*右下角的小图为bg_flower.gif*/
.box{
    height: 500px;
    width: 800px;
    margin: 0 auto;
    margin-top: 100px;
    background-image: url(img/bg_flower.gif), url(img/2.jpg);/*写在前面的背景图会在上面*/
    background-position: right bottom, left top;/*默认为left top*/
    background-repeat: no-repeat, repeat;/*默认为repeat*/
}

2.2 background-size 调整背景图片的大小

属性值可以为实际单位，也可以是百分比。

.box{
    background-size:60px 100px;/*宽，高*/
    background-size:60% 100%;
}

2.3 background-origin 规定背景图片的定位区域

background-origin: content-box / padding-box / border-box ;
下图中，绿色的是边框，黄色的是padding+content区域。

这里写图片描述

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
div{
    float:left;
    margin:30px;
    width: 120px;
    height: 150px;
    background: yellow;
    border: 20px solid green;
    padding: 20px;
    background-image: url(img/bg_flower.gif);
    background-repeat: no-repeat;
}
.box1{
    background-origin:content-box;
}
.box2{

    background-origin:padding-box;
}
.box3{
    background-origin:border-box;
}

2.4 background-clip 规定背景的绘制区域

background-clip: content-box / padding-box / border-box ;

这里写图片描述

<div class="box1">啦啦啦啦，德玛西亚。啦啦啦啦，剑圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div>
<div class="box2">啦啦啦啦，德玛西亚。啦啦啦啦，剑圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div>
<div class="box3">啦啦啦啦，德玛西亚。啦啦啦啦，剑圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div>
div{
    float:left;
    margin:30px;
    width: 120px;
    height: 150px;
    background: yellow;
    border: 20px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.box1{
    background-clip:content-box;
}
.box2{

    background-clip:padding-box;
}
.box3{
    background-clip:border-box;
}

2.5 linear-gradient 背景的颜色渐变（IE10）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
其中颜色可以用多种表现形式，包括带有透明度的rgba()形式

1） 线性渐变

这里写图片描述

下面让我们来看代码

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
div{
    float:left;
    margin:30px;
    width: 100px;
    height: 150px;
    border: 2px solid orange;
    font-size: 14px;
    line-height: 1.5;
}
.box1{/* 1、属性值最少为两种颜色 */
        background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, yellow); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, yellow); /* 标准的语法 */
}
.box2{/* 2、可以设置颜色渐变的方向，比如从左到右 */
        background: -webkit-linear-gradient(left, green , yellow); 
        background: -o-linear-gradient(left, green, yellow); 
        background: -moz-linear-gradient(left, green, yellow); 
        background: linear-gradient(left, green , yellow);
}
.box3{/* 3、也可以沿着对角的方向渐变 */
        background: -webkit-linear-gradient(top left, blue , yellow); 
        background: -o-linear-gradient(top left, blue, yellow); 
        background: -moz-linear-gradient(top left, blue, yellow); 
        background: linear-gradient(top left, blue , yellow); 
}
.box4{/* 4、或者，我们直接用角度确定渐变的方向（12点钟方向为0deg） */
       background: -webkit-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
       background: -o-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
       background: -moz-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
       background: linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
}
.box5{/* 5、我们也可以定义多种颜色的渐变，之前的方向的设置方法不变 */
      background: -webkit-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
      background: -o-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
      background: -moz-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
      background: linear-gradient(45deg, red,orange,yellow,green,blue,indigo,violet); 
}
.box6{/* 6、当然，渐变可以是很多次的 */
      background: -webkit-repeating-linear-gradient(red, red 10%, yellow 20%); 
      background: -o-repeating-linear-gradient(red, red 10%, yellow 20%);
      background: -moz-repeating-linear-gradient(red, red 10%, yellow 20%); 
      background: repeating-linear-gradient(red, red 10%, yellow 20%); 
}

2）、径向渐变

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

这里写图片描述

下面上代码

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
div{
    float:left;
    margin:30px;
    width: 150px;
    height: 150px;
    border: 2px solid orange;
    font-size: 14px;
    line-height: 1.5;
}
.box1{/* 1、颜色结点均匀分布（默认情况下 */
    background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, green); /* 标准的语法 */
            }
.box2{/* 2、当然，对于颜色发辐射界限，我们也可以进行设置 */
    background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); 
    background: -o-radial-gradient(red 5%, yellow 15%, green 60%); 
    background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); 
    background: radial-gradient(red 5%, yellow 15%, green 60%); 
}
.box3{/* 3、shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。            默认值是 ellipse。*/
    background: -webkit-radial-gradient(circle, red, yellow, green); 
    background: -o-radial-gradient(circle, red, yellow, green); 
    background: -moz-radial-gradient(circle, red, yellow, green); 
    background: radial-gradient(circle, red, yellow, green); 
            }
.box4{/* 4、size 参数定义了渐变的大小。它可以是以下四个值：closest-side farthest-side closest-corner                 farthest-corner，具体的不同大家可以自己尝试，这里只展示一种情况 */
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
    background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
.box5{/* 5、当然，也是有重复渐变这种情况*/
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

三、文本

3.1 text-shadow 文本阴影

规则跟box-shadow类似，text-shadow：X轴偏移值，Y轴偏移值，阴影模糊半径，颜色。在这里，需要注意的是，如果前三个数值写两个，比如text-shadow：5px 5px #ccc；会认为阴影模糊半径不存在，仍然有文字的重影，但是没有模糊的视觉效果了。

这里写图片描述

3.2 word-wrap | word-break 是否允许长单词换行，这两个可以一起使用

word-wrap: normal(只允许断点字换行) | break-word(如果单词过长，截断强制换行)
word-break: normal(浏览器默认的换行规则，一般是不允许长单词内部换行) | break-all（允许在单词内换行) | keep-all(只能在半角空格或连字符处换行);

这里写图片描述

<div class="box1">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box2">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box3">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box4">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
div{
    float:left;
    margin:30px;
    width: 100px;
    height: 150px;
    border: 2px solid rgba(0, 0, 0, 0.5);
    font-size: 14px;
    line-height: 1.5;
}
.box1{
    word-wrap: normal;
}
.box2{
    word-wrap: break-word;
}
.box3{
    word-break: keep-all;
}
.box4{
    word-break: break-all;
}
这篇就先写到这里，下一篇，我们可能说一下关于2D,3D属性及其动画效果的实现，和关键帧动画等一些内容。

（完）

驯鹿0
关注
专栏目录
【CSS所有属性及用法】
qq_38869966的博客
08-26 1085
@[TOC]CSS所有属性及用法CSS（层叠样式表）具有丰富的属性，以下是对一些主要属性的介绍及用法：一、字体属性1. font-family ：指定文本的字体。二、文本属性1. color ：设置文本颜色。三、背景属性1. background-color ：设置背景颜色。四、边框属性1. border-width ：设置边框的宽度。五、盒模型属性1. width 和 height ：分别设置元素的宽度和高度。六、布局属性1. display ：确定元素的显示类型，如块级、行内、行内块等。七、
CSS常用属性大全
12-11
详细的汇总了CSS常用属性，css+div配合。适合初学者或或以适应着查询。
常用css属性汇总大全
09-18
常用css，css，table样式，常用css，css，table样式 ，常用css，css，table样式。
css3常用属性
bigfatDone的博客
07-27 557
1. p标签不只是简单的换行，它的属性为{display:block}，这是为块元素，可以设置高度，边距 span标签也是换行，它的属性为{display:inline}，这是为行内元素，不可以设置高度，边距 font-family:"microsoft yahei"|''宋体"|"黑体"；这是字体选择，默认 微软雅黑 文字加粗 有b和strong标签  在css里面的加粗就有font-we...
CSS全解析
最新发布
TTKunn的博客
10-01 2991
CSS全解析
CSS3常用属性
Mi_victory的博客
03-07 332
font-family:设置字体。比如 font-family:"Microsoft Yahei"。 font-weight:字体粗细，属性值：normal、bold、bolder、lighter、100~900 line-height:行间距、 text-indent:首行缩进 letter-spacing:字间距 word-spacing:单词间距 cursor鼠标样式 CSS引入格式：&lt...
常用CSS3属性
weixin_39676449的博客
04-22 420
一.transform： 1.translate（2D 移动）： transform：translateX（x）；像X轴方向移动 transform：translateY（y）；像X轴方向移动 transform：translate（x，y）； 2.scale（2D 缩放）： transform：scale（x）；x<1 时，缩小，x>1时，放大 3.ratate（旋转）： trans...
20个CSS/CSS3常用样式汇总
09-25
在CSS和CSS3中，掌握一些常用的样式可以极大地提高网页设计和开发的效率。下面将详细解释提供的20个常用CSS样式，以及它们在实际应用中的作用。 1. `white-space: nowrap;`：此属性用于强制文本在一行内显示，不...
29个常用的CSS小技巧汇总
12-13
以下是一些常见的CSS小技巧，这些技巧可以帮助你更高效地实现各种视觉效果。 1. **清除图片下方空白间隙**： 当图片与文字一起显示时，有时会因为行内元素的默认对齐方式产生额外的空白。可以通过以下三种方法解决...
CSS3的常用属性（一）
weixin_30763397的博客
02-01 118
选择器 属性选择器（通过标签属性来选择） E[attr]： 表示只要元素<E>存在属性attr就能被选中 如： div[class] E[attr=val]： 表示元素<E>存在属性attr的值等于val，即可被选中 如： div[class="val"] E[attr*=val]： 表示元素<E>存在属性attr的值包含val，且在任...
CSS3常用属性大全
weixin_65921319的博客
06-25 778
无（none）、虚线（dotted）、点划线线（dotted）、点划线（dashed）、实线（solid）、双线（double ）、槽状（grove）、脊状（ridge）、凹陷（inset）和凸起（outset）等9种。第七种是伪类选择器，伪类选择器主要应用在标签上，它由四种状态：未访问链接（link）、已访问链接（visited）、激活链接（active）、鼠标停留在连接上(hover)。(闪烁) none(无)第六种是继承选择器，继承的规则是子标签在没有定义的情况下，继承父标签的选择器；
CSS常用汇总
qq_43716830的博客
05-04 3399
标签选择器 <style> /*标签选择器：写上标签名*/ p { color: red; /*将p标签内容改成红色*/ font-size: 25px; } </style> 类选择器 语法 .类名{ 属性1：属性值1； … } 一个类可以有多个类名，类名之间要用空格隔开 <head> <meta charse
常用CSS3属性汇总
weixin_34274029的博客
03-19 321
CSS3边框 border-radius 圆角边框 border-radius:25px; 复制代码 box-shadow 边框阴影 box-shadow: h-shadow v-shadow blur spread color inset; 复制代码 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值