CSS3控制网页的样式和布局
1.css3边框
- border-radius（圆角）:
div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; }
- 盒阴影：（第一个是数值是水平阴影，第二个数值是垂直阴影，第三个数值是阴影距离）
div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; }
border-radius（圆角规则）：border-radius:10px 10px 10px 5px;
2.css3背景
background-image：不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张
background-size：可指定背景图像的大小（相对于父元素宽度和高度的百分比或像素大小）
background-origin：指定背景图片的位置区域
- background-clip:剪裁属性，从指定位置开始绘制
#example3 { border: 10px dotted black; padding:35px; background: yellow; background-clip: content-box; }
3.css3渐变(gradients)
线性渐变（Linear Gradients）:向下/向上/向左/向右/对角方向(至少两种颜色)
径向渐变（Radial Gradients）: 由它们的中心定义
线性渐变：
(1)background-image: linear-gradient(#e66465, #9198e5);从红色到蓝色渐变，从上到下
(2)
渐变方向从左到右由红色渐变到黄色
#grad1 { height: 200px; background-color: red; /* 不支持线性的时候显示 */ background-image: linear-gradient(to right, red , yellow); }
(3)从左上角到右下角
(4)指定角度渐变
#grad2 { height: 100px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: linear-gradient(90deg, red, yellow); }
效果图
(5）透明度
rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
下面为从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：
#grad1 { height: 200px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }
(6）重复渐变：repeating-linear-gradient() 函数用于重复线性渐变
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
径向渐变：由中心像两边扩展，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
4.CSS3文本效果
- text-shadow:从左到右3个值依次为水平阴影，垂直阴影，阴影距离
h1 { text-shadow: 5px 5px 5px #FF0000; }
- box-shadow
box-shadow: 10px 10px 5px #888888;
- text-overflow
- word-wrap： 强制文本换行 - 即使这意味着分裂它中间的一个字
word-wrap:break-word; }
- word-break：单词拆分
word-break:keep-all;
word-break:break-all;
5.css3 2D转换
- translate() ：左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform: translate(50px,100px);
scale():元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
skew():
两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。
transform:skew(30deg,20deg);
6.css3 3D
rotateX():给定度数X轴旋转的元素
rotateY():给定度数Y轴旋转的元素
7.css3 过渡:元素从一种样式逐渐改变为另一种的效果
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
transition: width 2s, height 2s, transform 2s; transform: rotate(180deg);
即宽度过渡2s,高度过渡2s,旋转过渡2s
8.css3 动画：@keyframes 规则是创建动画，先将其绑到一个选择器至少2个动画属性绑到一个选择器上即动画名称和时长
把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：
div { width:100px; height:100px; background:red; animation:myfirst 5s; } @keyframes myfirst { from {background:red;} to {background:yellow;} }
div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
9.css3 多列
- column-count：分割为多少列
- column-gap：列与列之间的距离
- column-rule:边框所有属性简写
column-count:3; column-gap:40px; column-rule:4px outset #ff00ff;
如下
10.css3 用户界面
resize：属性指定一个元素是否应该由用户去调整大小。
div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; }
box-sizing:
- box-sizing:content-box(默认)即加入内容，边框高度和宽度会随之改变
- box-sizing:border-box不管内容多少，边框高度和宽度都不会变化
- outline-offset:在边框外加个轮廓
下面为：边框边缘之外 15 像素处的轮廓
div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
11.css3 按钮：cursor: pointer;箭头变为小手指
.button1 {font-size: 24px;background-color: #4CAF50;border-radius:2px;}
上述设置了按钮的大小，颜色，弧度，当border-radius:50%为椭圆形
禁用按钮
.button { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .disabled { opacity: 0.6; cursor: not-allowed; }
