CSS3内容 部分知识总结

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)

1. 线性渐变（Linear Gradients）:向下/向上/向左/向右/对角方向(至少两种颜色)
2. 径向渐变（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);

从左边元素移动50个像素，并从顶部移动100像素。

• rotate():在一个给定度数顺时针旋转的元素。负值元素逆时针旋转

transform:rotate(30deg);

• 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;
}

上述因其为both所以边框的宽度高度用户都可自行调整
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;
}