[分享]css3所有特性

CSS3是最新的CSS标准，它集成了许多强大的特性，可以大大提升我们网页设计的表现力。下面是CSS3的所有特性的详细介绍：/ 1、背景样式 / backgroundimage: url(img.jpg...

CSS3是最新的CSS标准，它集成了许多强大的特性，可以大大提升我们网页设计的表现力。下面是CSS3的所有特性的详细介绍：

/* 1、背景样式 */
background-image: url(img.jpg);
background-repeat: repeat-x;
background-color: #000;

/* 2、字体样式 */
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
color: #333;
line-height: 1.5;

/* 3、盒模型样式 */
margin: 10px;
padding: 10px;
width: 500px;
height: 300px;
border: 1px solid #ccc;

/* 4、选择器 */
p {
  color: red;
}

/* 5、文字特效 */
text-shadow: 1px 1px 1px #ccc;
text-decoration: underline;
text-transform: uppercase;

/* 6、前缀 */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;

/* 7、渐变 */
background: linear-gradient(to bottom, #3CA9D1, #FFFFFF);

/* 8、动画 */
animation: spin 2s linear infinite;

/* 9、多列布局 */
column-count: 3;

/* 10、弹性盒子 */
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;

/* 11、滤镜 */
filter: grayscale(50%);

/* 12、文本排版 */
writing-mode: vertical-lr;
text-orientation: mixed;

/* 13、网格布局 */
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 50px 1fr;

/* 14、变量 */
:root {
  --main-color: #333;
}

p {
  color: var(--main-color);
}

CSS3的各种特性可以让我们轻松实现各种复杂的效果，让网页设计更加出色。当然，CSS3也需要浏览器的支持，如果你想要兼容所有主流浏览器，最好在使用特性之前先做好兼容性处理。