关于前端:CSS3新增特性及用法

45次阅读

共计 716 个字符，预计需要花费 2 分钟才能阅读完成。

色彩：新增 RGBA，HSLA 模式, 新增透明度
文字暗影：（text-shadow）
边框：边框圆角：（border-radius）边框暗影：（box-shadow）边框图片：（border-image）
弹性盒子模型：（box-sizing：border-box;）
背景：
- background-size：设置背景图片的尺寸
- background-origin：设置背景图片的原点（定位、地位）
- background-clip：设置背景图片的裁切区域，以”，”分隔，能够设置多背景，用于自适应布局
背景：
- linear-gradient：（线性突变）
- radial-gradient：（径向突变）
过渡：transition，可实现动画
自定义动画 animation 定义动画：@keyframes 动画名称
在 CSS3 中惟一引入的伪元素是：selection

媒体查问 @media，多栏布局:

@media screen and (width:500px) {
 body {background-color: red;}
}

2D 转换：
- transform：translate(x，y) 挪动
- rotate(x，y) 旋转
- skew(x，y) 翻转
- scale(x，y) 缩放
3D 转换
字体图标：font-face
弹性布局：flex

新增伪类选择器：nth-child(n)

<body>
 <ul>
     <li>111</li>
     <li>222</li>
     <li>333</li>
 </ul>
</body>
<style>
     ul li:nth-child(1) {color: red;}
     ul li:nth-child(2) {color: blue;}
     ul li:nth-child(3) {color: green;}
 </style>

正文完