CSS3圆角
优点:
一、减少网站的维护量
二、提高网站的性能，少了对图片的HTTP请求，网页载入速度加快
三、增加视觉美观性
属性：
（1）border-radius
<style>
#div1{
width: 200px;
height: 50px;
border: 2px solid red;
border-radius: 25px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>border-radius:含义“边框半径”，指定一个值，就是能同时设置四个角的半径（默认值为0，但不可以为负）
border-radius：25px;–>将每个圆角的“水平半径”和“垂直半径”设置为25px
（2）指定每个角的半径
<style>
#div1{
width: 300px;
padding: 20px;
background: red;
border-radius: 25px;
}
#div2{
width: 300px;
padding: 20px;
background: skyblue;
border-radius: 15px 50px;
}
#div3{
width: 300px;
padding: 20px;
background: yellow;
border-radius: 15px 50px 30px;
}
#div4{
width: 300px;
padding: 20px;
background: pink;
border-radius: 15px 50px 30px 40px;
}
</style>
</head>
<body>
<div id="div1">一个值，四个圆角值相同</div>
<br>
<div id="div2">两个值，第一个值为左上角和右下角，第二个值为右上角和左下角</div>
<br>
<div id="div3">三个值，第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角</div>
<br>
<div id="div4">四个值，第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角</div>
<br>
</body>（3）
<style>
#div1{
width: 200px;
padding: 20px;
border: 2px solid;
background: plum;
border-top-left-radius: 20px 35px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/*border-radius: 20px;*/
}
</style>
</head>
<body>
<div id="div1"></div>注意：属性的两个长度第一个是水平半径，第二个是垂直半径，如果第二个值省略，则它是从第一格值复制。（如果任一长度为0，角落是方的，不圆润）
3 CSS3背景
之前学的几个背景属性：
background-color，background-img，background-position，background-repeat
<style>
body{
background-image: url("img/timg.jpg");
background-repeat: no-repeat;
background-color: pink;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>请看图片,图片是固定的，滑动的是字</p>
<p>请看图片</p>
<p>请看图片</p>
<p>请看图片</p>...</p>
</body>（1）background-clip：确定背景画区
<style>
#div1{
padding: 35px;
background: pink;
border: 5px dotted black;
/*background-clip: border-box;*/
/*background-clip: padding-box;*/
background-clip: content-box;
}
</style>
</head>
<body>
<div id="div1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaa
</div>
</body>background-clip：border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
（2）background-origin：确定背景位置
<style>
div{
padding: 25px;
border: 5px dotted #000000;
background-image: url("img/timg.jpg");
background-repeat: no-repeat;
background-position: left;
}
#div1{
background-origin: padding-box;/*默认值*/
}
#div2{
background-origin: content-box;
}
#div3{
background-origin: border-box;
}
</style>
</head>
<body>
<div id="div1">
ashdkjhjhsjalshbcccccccccccccccshhhhhhhhhhhhhhh<br>
aaaaaaaaaaaddddddddddkkkkkkkkksssssssssss<br>
ajjjjjjjjjkwwwwwwwwwwwwwwwwwsssssssss
</div><br>
<div id="div2">
ashdkjhjhsjalshbcccccccccccccccshhhhhhhhhhhhhhh<br>
aaaaaaaaaaaddddddddddkkkkkkkkksssssssssss<br>
ajjjjjjjjjkwwwwwwwwwwwwwwwwwsssssssss
</div><br>
<div id="div3">
ashdkjhjhsjalshbcccccccccccccccshhhhhhhhhhhhhhh<br>
aaaaaaaaaaaddddddddddkkkkkkkkksssssssssss<br>
ajjjjjjjjjkwwwwwwwwwwwwwwwwwsssssssss
</div>
</body>（3）四个角
<style>
#div1{
width: 300px;
padding: 20px;
background: red;
border-radius: 25px;
}
#div2{
width: 300px;
padding: 20px;
background: skyblue;
border-radius: 15px 50px;
}
#div3{
width: 300px;
padding: 20px;
background: yellow;
border-radius: 15px 50px 30px;
}
#div4{
width: 300px;
padding: 20px;
background: pink;
border-radius: 15px 50px 30px 40px;
}
</style>
</head>
<body>
<div id="div1">一个值，四个圆角值相同</div>
<br>
<div id="div2">两个值，第一个值为左上角和右下角，第二个值为右上角和左下角</div>
<br>
<div id="div3">三个值，第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角</div>
<br>
<div id="div4">四个值，第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角</div>
<br>
</body>（4）background-size 背景大小
body{
background: url("img/dog2.jpg");
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<p>原始图片：<img src="img/dog2.jpg" alt="dog" width="224" height="150"/></p>
</body>css3以前，背景图像大小由图像的实际大小决定
css3中可以指定背景图片，可以重新指定背景图片的大小，像素或百分比。
（5）伸展图片
<style>
#div1{
/*width: 200px;*/
/*height: 100px;*/
background: url("img/dog2.jpg");
background-repeat: no-repeat;
/*background-size: 100px 100px;*//*给一个值，第二个值为auto*/
/*background-size: 50% 100%;*//*百分比是相对包含元素的尺寸*/
/*background-size: contain;*//*缩小图片以适合元素（维持像素长宽比）*/
background-size: cover;/*缩小图片一填补元素（维持像素长宽比）*/
}
</style>
</head>
<body>
<div id=div1>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>...</p>
</div>
</body>background-size: contain 缩小图片以适合元素（维持像素长宽比）以较大的缩放比例为标准。
background-size: cover 扩展元素以填补元素（维持像素长宽比）以较小的缩放比例为标准。
background-size: 100px 100px; 缩小图片至指定的大小设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”atuo(自动)”
background-size: 50% 100% 缩小图片至指定的大小，百分比是相对包含元素的尺寸
4 CSS3阴影
shadow(阴影)
1.text-shadow:文本阴影
参数:1,在x轴的偏移量,越大越偏右
2,在y轴的偏移量,上为负数,下为正数
3.阴影半径(正值,越大阴影越模糊)
4,代表颜色
text-shadow:
-1px 3px 2px rgba(22,22,22,0.3),
2px 3px 3px red,
2px -3px 2px skyblue,
-2px -3px 2px pink;
分别设置多个阴影的时候用”,”隔开.
动画和文字阴影的结合.
<style>
.transform{
width: 300px;
height: 100px;
font-size: 45px;
color: #666;
animation:active 0.2s infinite alternate;//动画捆绑
}
@keyframes active {
0%{text-shadow: 0 5px 1px gray}
50%{text-shadow: 0 5px 1px blue}
100%{text-shadow: 0 5px 1px pink}
}
</style>2.box-shadow:是给元素块添加阴影
参数:1,投影方式(可写可不写)
2,x轴的偏移量
3,y轴的偏移量
4,阴影的半径
5,阴影的颜色
.divShadow{
width: 100px;
height: 100px;
margin-left: 50%;
background-color: #e5ff22;
box-shadow: inset 2px 3px 2px red;
}加上inset就是阴影往元素块里显示
5 CSS3倒影（反射）
reflect:反射
1,用法:根据浏览器的兼容性问题,使用box-reflect前需要在前面加上-webkit的前缀
-webkit-box-reflect: below 10px
-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3));2,参数:①反射的方向(above/below/left/reght)上下左右(注:设为左右的时候值要大一点才看得见,因为太小了就要做小浏览器页面才能看见)
②倒影和本体的距离,可以为负数
3,其他属性:透明度变化
-webkit-box-reflect: below 10px
-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3));gradient:变化率,变化曲线
6 CSS3渐变
渐变为css3新增的属性,分为两种: 线性渐变和径向渐变
1,线性渐变:
1.1,-webkit-gradient(参数多,但是容易调整)
background: -webkit-gradient(linear,0% 0%,100% 0%,from(pink),to(skyblue));
参数:linear: 线性,后面的两组参数代表的是起始位置和终止位置,from(起始的颜色),to(渐变到哪种颜色)
1.2,linear-gradient:
background: linear-gradient(yellow, green);参数只有起始颜色和终止颜色
background: linear-gradient(yellow, green,blue);也可以渐变多个颜色
background: linear-gradient(yellow 50%,blue);在颜色后面加上百分数可以控制颜色开始渐变的位置
1.3,水平渐变(方向为水平方向)
background: -webkit-linear-gradient(right,yellow,blue);参数为方向,起始颜色,终止颜色
1.4,以角度为方向进行渐变
background: -webkit-linear-gradient(45deg,pink,skyblue);参数为角度,起始颜色,终止颜色
2,径向渐变:
css3径向渐变就是圆形或者椭圆渐变,不在沿着一条线进行变化,而是从一个起点朝着所有方向渐变,相比于线性渐变,径向渐变要复杂.
1,background:radial-gradient(red,green); 标准语法
2,不均匀变化:
background:radial-gradient(red 30%,green 80%);参数:在颜色的后面加上百分数可以控制渐变的程度.
3,形状变化:
background: radial-gradient(ellipse,deeppink,plum);//椭圆
background: radial-gradient(circle,deeppink,plum);//圆形参数: 变化的形状, 起始的颜色变化, 终止的颜色
4.重复变化:
background: repeating-radial-gradient(skyblue 4%,royalblue 20%);
385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
