不知道大家对以前做的框框有什么感觉? 是不是感觉太死板?没有圆润性?
下面我们就来学习一下怎样把这些方方正正的边框处理的更加圆润!
CSS3圆角
优点:
圆角的优点:
一是减少网站维护工作量;
二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;
三是增加视觉美观性。
(1)border-radius:含义是“边框半径”,指定一个值,就能同时设置四个圆角的半径(默认值为0,但不可以为负值)。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius</title>
<style>
.div1{
width: 200px;
height: 50px;
border: 2px solid red;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
border-radius: 25px
将每个圆角的"水平半径"和"垂直半径"都设置为25px。
(2)border-radius(指定每个圆角)缺失参数的情况
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius 指定每个圆角</title>
<style>
.div1{
padding: 20px;
background: red;
width: 300px;
border-radius: 25px;
}
.div2{
padding: 20px;
background: yellow;
width: 300px;
border-radius: 15px 50px;
}
.div3{
padding: 20px;
background: pink;
width: 300px;
border-radius: 15px 50px 30px;
}
.div4{
padding: 20px;
background: green;
width: 300px;
border-radius: 15px 50px 30px 15px;
}
</style>
</head>
<body>
<div class="div1">一个值,四个圆角值相同</div>
<br/>
<div class="div2">两个值,第一个值为左上角和右下角,第二个值为右上角和左下角</div>
<br/>
<div class="div3">第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角</div>
<br/>
<div class="div4">第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角</div>
</body>
</html>
一个值:四个圆角值相同
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
(3)设置四个角
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.div1{
border: 2px solid;
width: 200px;
background: red;
padding: 20px;
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 class="div1"></div>
</body>
</html>
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
注意:属性的两个长度第一个值是水平半径,第二个是垂直半径。如果省略第二个值,它是从第一个复制。如果任一长度为零,角落里是方的,不圆润。
CSS3背景
复习background之前学习到的属性:background-color、background-image、background-position、background-repeat。
授课内容:
(1)Background Clip:该属性确定背景画区。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景画区</title>
<style>
.div1{
border: 10px dotted black; /*dotted 点的意思*/
padding:35px;
background: yellow;
background-clip: border-box; /*默认值 背景被裁剪到边框盒*/
/*background-clip: padding-box;*/ /*背景被裁剪到内边距框*/
/*background-clip: content-box;*/ /*背景被裁剪到内容框*/
}
</style>
</head>
<body>
<div class="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>
有以下几种可能的属性:
background-clip: content-box:背景被裁剪到内容框(即border)
background-clip: border-box:背景被裁剪到边框盒
background-clip: padding-box:背景被裁剪到内边距框
(2)Background Origin:
用于确定背景的位置, background-origin 属性规定 background-position 属性相对于什么位置来定位。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景位置</title>
<style>
div{
padding:25px;
border:5px dotted #000000;
background-image:url("../img/timg.jpg");
background-repeat:no-repeat;
background-position: left;
/*background-attachment: fixed;*/ /*则该属性没效果*/
}
.div1{
background-origin:padding-box; /*默认值 背景图像相对于内边距框来定位*/
}
.div2{
background-origin:content-box; /*背景图像相对于内容框来定位*/
}
.div3{
background-origin:border-box; /*背景图像相对于边框盒来定位*/
}
</style>
</head>
<body>
<div class="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
<br/>
<div class="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
<br/>
<div class="div3">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>
(3)Background Size:
注意别和 clip 弄混,这个主要用于设定图片本身。
background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。可以指定像素或百分比大小,指定的大小是相对于父元素的宽度和高度的百分比的大小。
(1)调整背景图片的大小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>调整背景图片的大小</title>
<style>
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="162"></p>
</body>
</html>
(2)伸展背景图像完全填充内容区域
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伸展背景图像完全填充内容区域</title>
<style>
.div1{
background:url("../img/dog2.jpg");
background-repeat: no-repeat;
/*background-size:25%;*/ /*对背景图像进行拉伸,以使背景图像恰好水平复制四次*/
background-size: 100px 100px; /*缩小图片至指定的大小 如果给定一个值,第二个值为auto自动*/
/*background-size: 50% 100%;*/ /*缩小图片至指定的大小,百分比是相对包含元素的尺寸*/
/*background-size: contain;*/ /*缩小图片以适合元素(维持像素长宽比)*/
/*background-size: cover;*/ /*扩展元素以填补元素(维持像素长宽比)*/
}
</style>
</head>
<body>
<div class="div1">
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
<p>它是dog</p>
</div>
</body>
</html>
background-size: contain 缩小图片以适合元素(维持像素长宽比)
background-size: cover 扩展元素以填补元素(维持像素长宽比)
background-size: 100px 100px; 缩小图片至指定的大小设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"atuo(自动)"
background-size: 50% 100% 缩小图片至指定的大小,百分比是相对包含元素的尺寸
抓数据跨域问题
跨域:浏览器为了安全性,阻止不同域名下,进行数据交互。