The Future Depends on You
首页/HTML&CSS/css3新增属性/
css3新增属性
上次更新时间:2021-6-13 文章分类:HTML&CSS 阅读人数:18

1、边框

  • border-radius

border-radius 给div元素添加圆角的边框。

border-radius: 10px

is equivalent to:

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
  • border-image

将图片规定为包围 div 元素的边框

border-image 的五个参数:

border-image-source:图片路径

border-image-slice:图片边框向内偏移

border-image-width:图片边框宽度

border-image-outset:边框图像区域超出边框的量

border-image-repeat:图像边框是否应平铺、铺满、拉伸

2、圆角

  • box-shadow

box-shadow 向 div 元素添加阴影

box-shadow 的六个参数:

h-shadow:水平阴影位置(必须)

v-shadow:垂直阴影位置(必须)

blur:模糊距离

spread:阴影大小

color:阴影颜色

inset:内层阴影

box-shadow: 0 0 10px 10px #aaa inset

3、背景

  • background-image

background-image 属性为元素设置背景图像

  • background-size

background-size 属性规定背景图像的尺寸

  • background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位

background-origin 的三个参数:

padding-box:背景图像相对于内边距框来定位

border-box:背景图像相对于边框盒来定位

content-box:背景图像相对于内容框来定位

  • background-clip

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

background-clip 的三个参数:

border-box:背景被裁剪到边框盒

padding-box:背景被裁剪到内边距框

content-box:背景被裁剪到内容框

4、渐变

  • 线性渐变(linear-gradient)
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

线性渐变 -> 从左到右

background-image: linear-gradient(to right, red , yellow)

线性渐变 -> 对角

background-image: linear-gradient(to bottom right, red, yellow)

使用角度

background-image: linear-gradient(angle, color-stop1, color-stop2);

重复线性渐变

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
  • 径向渐变(radial-gradient)
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

径向渐变 -> 均匀分布

background-image: radial-gradient(red, yellow, green)

径向渐变 -> 不均匀分布

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

重复的径向渐变

background-image: repeating-radial-gradient(red, yellow 10%, green 15%)

5、文字效果

  • text-shadow

text-shadow 属性适用于文本阴影

text-shadow: 5px 5px 5px #ccc;
  • text-overflow

text-overflow 属性指定应向用户如何显示溢出内容

text-overflow 的三个参数:

clip:修剪文本

ellipsis:显示省略符号来代表被修剪的文本

string:使用给定的字符串来代表被修剪的文本 - word-wrap

word-wrap 允许长单词换行到下一行

word-wrap: break-word
  • word-break

word-break 属性规定自动换行的处理方法

word-break 的三个参数:

normal:使用浏览器默认的换行规则

break-all:允许在单词内换行

keep-all:只能在半角空格或连字符处换行

6、2D转换

转换让某个元素改变形状,大小和位置

  • translate

translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动

  • rotate

rotate()方法,在一个给定度数顺时针旋转的元素。负值表示元素逆时针旋转

  • scale

scale()方法,元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数

  • skew

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜

7、3D转换

  • translate3d

translate3d:定义 3D 转化

translateX:定义 3D 转化,仅使用用于 X 轴的值

translateY:定义 3D 转化,仅使用用于 Y 轴的值

translateZ:定义 3D 转化,仅使用用于 Z 轴的值

  • scale3d

scale3d:定义 3D 缩放转换

scaleX:定义 3D 缩放转换,通过给定一个 X 轴的值

scaleY:定义 3D 缩放转换,通过给定一个 Y 轴的值

scaleZ:定义 3D 缩放转换,通过给定一个 Z 轴的值

  • rotate3d

rotate3d:定义 3D 旋转

rotateX:定义沿 X 轴的 3D 旋转

rotateY:定义沿 Y 轴的 3D 旋转

rotateZ:定义沿 Z 轴的 3D 旋转

8、过渡

过渡是元素从一种样式逐渐改变为另一种的效果

要实现这一点,必须规定两项内容:

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。(如果未指定的期限,transition将没有任何效果,因为默认值是0)
transition:属性、过度时间、过度时间曲线、过度延迟

9、动画

@keyframes 规则是创建动画、@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式

@keyframes myfirst
{
  0%   {background: red}
  25%  {background: yellow}
  50%  {background: blue}
  75%  {background: green}
  100% {background: red}
}

animation: myfirst 5s infinite

10、多列

CSS3 可以将文本内容设计成像报纸一样的多列布局

  • column-count:

column-count 属性指定了需要分割的列数

  • column-gap:

column-gap 属性指定了列与列间的间隙

  • column-rule-style:

column-rule-style 属性指定了列与列间的边框样式

  • column-rule-width:

column-rule-width 属性指定了两列的边框厚度

  • column-rule-color:

column-rule-color 属性指定了两列的边框颜色

  • column-rule:

column-rule 属性是 column-rule-* 所有属性的简写

  • column-span:

column-span 指定元素跨越多少列

  • column-width:

column-width 属性指定了列的宽度

11、用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框

  • resize:

resize属性指定一个元素是否应该由用户去调整大小

none:用户无法调整元素的尺寸

both:用户可调整元素的高度和宽度

horizontal:用户可调整元素的宽度

vertical:用户可调整元素的高度

注意:如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll

  • box-sizing:

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

  • outline-offset:

outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓

12、媒体查询

@media 针对不同媒体类型可以定制不同的样式规则

媒体查询可用于检测很多事情,例如:

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏,竖屏)
分辨率

媒体查询的参数:

all:用于所有多媒体类型设备
print:用于打印机
screen:用于pc、平板、手机
speech:用于屏幕阅读器