CSS3 圆角

来源：互联网发布：java aes加解密编辑：程序博客网时间：2024/05/16 05:46

不知道大家对以前做的框框有什么感觉？是不是感觉太死板？没有圆润性？

下面我们就来学习一下怎样把这些方方正正的边框处理的更加圆润！

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% 缩小图片至指定的大小，百分比是相对包含元素的尺寸

抓数据跨域问题
跨域：浏览器为了安全性，阻止不同域名下，进行数据交互。

阅读全文

0 0