CSS3 新增属性（边框，背景，文字，颜色属性）

Posted 2021-08-01 QIANDXX

CSS3 新增属性

• 边框属性
• 背景属性
• 文字属性
• 颜色属性

1. 边框属性

属性	描述
border-radius	创建圆角边框
box-shadow	为元素添加阴影
border-image	使用图片来绘制边框
border-color	设置边框的颜色

（1）border-radius

border-radius 用来设计边框圆角的属性。

语法：

border-radius:none|<length>{1,4}[/<length>{1,4}]?

• none：是默认值，表示没有圆角
• <length>：为长度值，不能为负值,分为两组，每组可以有1到4个值，第一组为水平半径，第二组为垂直半径

例：

div{
    border-radius:20px;
    border-radius:20px 40px;
}

（2）box-shadow

box-shadow 用于向方框添加阴影

语法：

box-shadow: h-shadow|v-shadow|blur|spread|color|inset;

• h-shadow：（必需）水平阴影的位置。允许负值
• v-shadow：（必需）垂直阴影的位置。允许负值
• blur：模糊距离
• spread：阴影的大小
• color：阴影的颜色。在CSS颜色值寻找颜色值的完整列表
• inset：从外层的阴影（开始时）改变阴影内侧阴影

例：

div{
    box-shadow:10px 10px 5px #888888;
}

（3）border-image
border-image 属性，专门用于图像边框的处理，可用灵活地分割图像，并应用于边框。

语法：

border-image:none|<image>[<number>|<percentage>{1,4}[/<border-width>{1,4}]?[stretch|repeat|round]{0,2}

• none：默认值，表示边框没有背景图
• <image>：使用绝对或相对的url地址指定图像源
• <number>：裁切边框图像大小，没有单位，默认以像素为单位
• <percentage>：裁切边框图像大小，使用百分比表示
• <border-width>：用于设定边框宽度，不能为负值
• stretch、repeat、round：分别表示拉伸、重复、平铺，默认值为stretch

例：

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;

（4）border-color

border-color 属性用于设置边框的颜色。

语法：

border-color:[<color>|transparent]{1,4}

• <color>：是一个颜色值，可以是半透明颜色
• transparent：是透明值，不设颜色时使用，为默认值

例：

border-style:solid;
border-color:#ff0000 #0000ff;

2. 背景属性

CSS3增强了原有背景属性的功能，并增添了一些新的背景属性。

属性	描述
background-clip	指定背景的显示区域
background-origin	指定背景的原点位置
background-size	指定背景图片的大小

（1）background-clip

background-clip 用来指定背景的显示区域。

语法：

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

• border-box：表示背景从边框开始显示
• padding-box：表示背景从内边距开始显示
• content-box：表示背景仅在内容区域显示

例：

-webkit-background-clip:border-box;
-moz-background-clip:border-box;
background-clip:border-box;

（2）background-origin

background-origin 用来指定背景图像的原点位置，默认情况下总是以元素边框以内的左上角为坐标原点进行背景图像定位。

语法：

background-origin:border-box|padding-box|content-box;

• border-box：表示原点位置为边框区域的开始位置
• padding-box：表示原点位置为内边框区域的开始位置
• content-box：表示原点位置为内容区域的开始位置

例：

-webkit-background-origin:border-box;
-moz-background-origin:border-box;
background-origin:border-box;

（3）background-size

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

语法：

background-size:[<length>|<percentage>|auto]{1,2}|cover|contai;

• <length>：设置背景图像的宽度
• <percentage>：设置背景图像的高度
  (宽度与高度如果只给出一个值，第二个值设置为auto)
• cover：表示保持背景图像本身的宽高比例将图像缩放到正好完全覆盖所定义的背景区域，可能会裁剪掉部分图像
• contai：表示保持背景图像本身的宽高比例，将图像缩放到正好适应所定义的背景区域，但可能不会完全覆盖背景区域

例：

background-size:30% 30%,60% 60%, 100% 100%;

3. 文字属性

属性	描述
text-shadow	可向文本应用阴影
text-overflow	溢出文本处理属性
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行
@font-face规则	字体自定义功能

（1）text-shadow

text-shadow 可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

语法：

text-shadow:length|length|opacity|color；

• length：表示阴影在水平和垂直方向相对于文字本身的偏移距离（可以为负值）
• opacity：表示阴影效果模糊的距离（不能为负，0表示没有模糊）
• color：表示阴影的颜色值

例：

text-shadow:5px 5px 3px #333;

（2）text-overflow

text-overflow 溢出文本处理属性

语法：

text-overflow:clip|ellipsis|ellipsis-word；

• clip：表示直接裁切溢出的文本
• ellipsis：表示文本溢出时显示省略标记，代替最后一个字符
• ellipsis-word：也表示文本溢出时显示省略标记，代替的是最后一个词

例：

overflow:hidden; /*溢出内容设为隐藏*/
white-space:nowrap; /*强制文本单行显示*/
text-overflow:ellipsis; /*设置溢出文本显示为省略标记*/

（3）word-wrap

语法：

word-wrap: normal|break-word|；

• normal：表示为默认的连续文本换行，允许内容超出边界
• break-word：允许在单词内换行

例：

p.test {word-wrap:break-word;}

（4）@font-face规则

CSS3 新增了字体自定义功能，通过 @font-face 规则来引用互联网上任一服务器中存在的字体。

语法：

@font-face:{属性:值;}

属性和值为：

• font-family：设置文本的字体名称，该名称可被当作字体引用
• font-style：设置文本样式
• font-variant：设置文本是否为小型大写字母大小写
• font-weight：设置文本的粗细
• font-stretch：设置文本是否横向的拉伸变形
• font-size：设置文本字号大小
• src：设置自定义字体的相对路径或者绝对路径，可包含 format 信息

例：指定名为 “myFirstFont” 的字体，并指定在哪里可以找到它的 url：

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9 */
}

4. 颜色属性

（1）HSL 模式

取值：

• H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
• S： Saturation(饱和度)。取值为：0.0% - 100.0%
• L： Lightness(亮度)。取值为：0.0% - 100.0%

例：hsl(360,50%,50%) 红色

<style type="text/css">
body{
    background:rgba(0,0,255,0.5);
}
div{
    width:300px;
    height:300px;
    background:hsl(140,50%,50%);
    position:absolute;
    top:0;
    left:0;
}
</style>
<body>
    <div></div>
</body>

（2）HSLA 模式

取值：

• H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
• S： Saturation(饱和度)。取值为：0.0% - 100.0%
• L： Lightness(亮度)。取值为：0.0% - 100.0%
• A： Alpha透明度。取值0~1之间。

例：hsl(360,50%,50%,0.5) 红色

<style>
body{
    background:HSL(0,100%,50%)
}
div{
    width:300px;
    height:300px;
    background:HSLA(230,100%,50%,0);
    position:absolute;
    top:0;
    left:0;
}
</style>
</head>
<body>
    好好学习，天天向上
    <div></div>
</body>

（3）RGBA 模式

取值：

• R： 红色值。正整数 | 百分数
• G： 绿色值。正整数 | 百分数
• B： 蓝色值。正整数 | 百分数
• A： Alpha透明度。取值0~1之间。

例：rgba(255,0,0,0.5) 半透明红色

<style type="text/css">
    body{
        background:rgba(255,0,0,1)
    }
    div{    
        width:300px;
        height:300px;
        background:rgba(0,0,255,0.4);
        position:absolute;
        top:0;
        left:0;
    }
</style>
<body>
    好好学习，天天向上
    <div></div>
</body>

---

最后

CSS3 相关面试题

• 水平垂直居中的方法
• 三列布局（中间固定两边自适应宽度）
• 清除浮动元素的方法和各自的优缺点
• css 实现自适应正方形
• CSS3 新增伪类有那些
• CSS3 有哪些新特性
• 请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景
• rgba() 和 opacity 的透明效果有什么不同
• …
  
  前端学习笔记、大厂面试题等PDF均可分享，点这里进入免费领取!