[分享]css3所有

CSS3是前端开发中非常重要的一个技术，它包含了很多新增的属性和功能，可以让我们在网页设计中更加灵活自由。CSS3中最常用的属性有：颜色、文本样式、盒模型、背景、渐变、阴影、边框、变形、过渡、动画等等...

CSS3是前端开发中非常重要的一个技术，它包含了很多新增的属性和功能，可以让我们在网页设计中更加灵活自由。

CSS3中最常用的属性有：颜色、文本样式、盒模型、背景、渐变、阴影、边框、变形、过渡、动画等等。

/* 颜色属性 */
color: #000; /* 十六进制颜色值 */
color: rgb(0,0,0); /* RGB颜色值 */
color: rgba(0,0,0,0.5); /* RGBA颜色值 */

/* 文本样式属性 */
font-size: 14px; /* 字号 */
font-weight: bold; /* 字体粗细 */
text-align: center; /* 水平对齐 */
line-height: 1.5; /* 行高 */
letter-spacing: 0.5px; /* 字间距 */
text-shadow: 1px 1px 1px #ccc; /* 文本阴影 */

/* 盒模型属性 */
width: 100px; /* 元素宽度 */
height: 100px; /* 元素高度 */
padding: 10px; /* 内边距 */
margin: 10px; /* 外边距 */
border: 1px solid #000; /* 边框样式 */
border-radius: 5px; /* 边框圆角 */
box-shadow: 1px 1px 1px #ccc; /* 盒子阴影 */

/* 背景属性 */
background-color: #fff; /* 背景颜色 */
background-image: url('bg.jpg'); /* 背景图片 */
background-repeat: repeat; /* 背景平铺方式 */
background-size: cover; /* 背景图片显示方式 */
background-position: center; /* 背景图片位置 */

/* 渐变属性 */
background: linear-gradient(#fff, #000); /* 线性渐变 */
background: radial-gradient(#fff, #000); /* 径向渐变 */

/* 阴影属性 */
box-shadow: 1px 1px 1px #000; /* 盒子阴影 */
text-shadow: 1px 1px 1px #000; /* 文本阴影 */

/* 边框属性 */
border: 1px solid #000; /* 边框样式 */
border-radius: 5px; /* 边框圆角 */

/* 变形属性 */
transform: rotate(45deg); /* 旋转 */
transform: scale(1.5); /* 缩放 */
transform: translate(50px,50px); /* 移动 */

/* 过渡属性 */
transition: all 0.5s ease; /* 过渡效果 */

/* 动画属性 */
animation: myanimation 1s linear infinite; /* 动画效果 */ 

以上属性只是CSS3中的一部分，还有很多值得我们学习和掌握。