08-圆角属性+标准盒子模型和怪异盒子模型+文字和盒子的阴影、剪裁属性+背景属性
1.练习-边框模拟三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
边框模拟三角形：元素相邻的两个边框同时存在时，交点会形成平分，
此时将content区域的宽和高设置为0，在将
其他边框设置为透明色，就会形成一个三角形。
*/
.box {
width: 0;
height: 0;
border-left: 50px solid red;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2.圆角属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
width: 200px;
height: 100px;
background: red;
margin: 10px auto 0;
/* 1 圆角属性可以是像素值，也可以是百分比。如果是百分比，则是宽和高的百分比。 */
/* 左上 */
border-top-left-radius: 50px;
/* 右上 */
border-top-right-radius: 10%;
/* 右下 */
border-bottom-right-radius: 50px;
/* 左下 */
border-bottom-left-radius: 50px;
/* 2 圆角复合属性。 */
/* 一个值 左上右上右下左下 */
border-radius: 100px;
/* 两个值，两队值分别是对角线。 左上右下 右上左下 */
border-radius: 100px 100px;
/* 三值 左上 右上左下 右下 */
border-radius: 100px 100px 100px;
/* 四个值 左上 右上 右下 左下 */
border-radius: 100px 100px 100px 100px;
/* 3 圆角分别设置宽和高。 */
/* 水平100px，垂直50px */
border-radius: 100px/50px;
/* 水平水平水平水平/垂直垂直垂直垂直，四个角的水平分别是100px、90px、80px、70px，垂直都是50px。 */
border-radius: 100px 90px 80px 70px/50px 50px 50px 50px;
}
/* 半圆 */
div:nth-of-type(2) {
width: 200px;
height: 100px;
background: red;
border-radius: 100px 100px 0 0;
}
/* 扇形 */
div:nth-of-type(3) {
width: 200px;
height: 200px;
background: red;
border-radius: 200px 0 0 0;
}
/* 椭圆 */
div:nth-of-type(4) {
width: 200px;
height: 100px;
background: red;
/*border-radius: 50%;*/
border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
3.练习-太极
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background: #ccc;
}
.box {
width: 300px;
height: 300px;
margin: 100px auto 0;
position: relative;
transition: all 3s;
}
.left {
width: 150px;
height: 300px;
background: #000;
float: left;
border-radius: 150px 0 0 150px;
}
.right {
width: 150px;
height: 300px;
background: #fff;
float: right;
border-radius: 0 150px 150px 0;
}
/* 绝对定位设置水平居中的另一种方式：left: 0;
right 0;margin 0 auto; */
.top {
width: 150px;
height: 150px;
background: black;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50%;
}
.bottom {
width: 150px;
height: 150px;
background: #fff;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50%;
bottom: 0;
}
.top .circle, .bottom .circle {
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
.bottom .circle {
background: #000;
}
.box:hover{
transform: rotate(3600deg);
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="top">
<div class="circle"></div>
</div>
<div class="bottom">
<div class="circle"></div>
</div>
</div>
</body>
</html>
4.伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
1 在元素内部有一前一后两个盒子，就是伪元素。
2 伪元素默认是行内显示模式。
3 伪元素就是元素中嵌套的元素。
4 伪元素中的文本不会被搜索引擎抓取到。
5 伪元素经常用来设置显示效果，如果阴影、边框。
*/
.box {
width: 300px;
height: 300px;
background: pink;
}
.box::before {
/* 伪元素的content必须写。 */
content: 'before';
width: 100px;
height: 100px;
background: yellowgreen;
display: block;
}
.box::after {
content: 'after';
}
</style>
</head>
<body>
<div class="box">
<span>span</span>
</div>
</body>
</html>
5.clearFix清除浮动的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.one {
width: 100px;
height: 100px;
background: gray;
float: left;
}
/* 通过添加标签清除浮动。 */
.two {
clear: both;
}
/* 通过clearFix清除浮动。 */
.clearFix::after {
/* 伪元素content必须写。 */
content: '';
/* 伪元素默认行内样式，需要转换为块。 */
display: block;
/* 使用clear: both;清除浮动。 */
clear: both;
}
.footer {
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="box clearFix">
<div class="one"></div>
<!--<div class="two"></div>-->
</div>
<div class="footer"></div>
</body>
</html>
6.标准盒子模型和怪异盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
1 标准盒子模型，在网页的尺寸=content+padding+border，
当盒子设置padding或者border后盒子的尺寸会变大。
2 怪异盒子模型，在网页的尺寸=content+padding+border，
当盒子设置padding或者border后盒子的尺寸不会变大，
会从content区域自动减去，保证盒子在网页的尺寸为width和height值。
注意：怪异盒子模型一定要设置width和height值。
*/
/* 标准盒子模型在网页中的宽高=100(width)+10(border)*2+20(padding)*2=160px */
.one {
width: 100px;
height: 100px;
background: red;
margin: 10px auto;
padding: 20px;
border: 10px solid gray;
/* 标准盒子模型，box-sizing的默认值为content-box。 */
box-sizing: content-box;
}
/* 怪异盒子模型在网页中的宽高=设置的width和height。 */
.two {
width: 100px;
height: 100px;
background: yellow;
margin: 10px auto;
padding: 20px;
border: 20px solid red;
/* 怪异盒子模型。 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
7.练习-小米商品展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
1 实现边框压在图片上需要使用定位。通过给a的伪元素添加绝对定位和边框，来实现边框压在图片的效果。
2 可以给li添加圆角属性，然后通过overflow: hidden;溢出隐藏，来让li的后代也有圆角。
*/
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background: #333;
}
.box {
width: 1000px;
height: 170px;
margin: 200px auto;
}
.box ul li {
width: 316px;
height: 170px;
float: left;
margin-right: 10px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.box ul li a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
border:10px solid rgba(255,255,255,.5);
display: none;
}
/*.box ul li:hover a::after {*/
/*display: block;*/
/*}*/
/* 鼠标移入a，使得a的伪元素实现效果。 */
.box ul a:hover::after {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="">
<img src="./img/1.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="./img/2.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="./img/3.jpg" alt="">
</a>
</li>
</ul>
</div>
</body>
</html>
8.文字阴影属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
h1 {
font-size: 50px;
text-align: center;
/* 1 文字阴影属性，可以设置多组。 */
/* 2 文字阴影属性text-shadow的取值，水平偏移 垂直偏移 模糊程度(羽化) 颜色。 */
text-shadow: 2px 0 0 red, 0 3px 0 yellow;
}
</style>
</head>
<body>
<h1>11111111111111</h1>
</body>
</html>
9.练习-凹凸效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
background: #ccc;
}
/* 文字凹的效果。 */
/* 将文字的颜色和背景色设置一致，然后利用文字阴影属性text-shadow设置凹凸效果。 */
h1 {
color: #ccc;
font-size: 50px;
text-align: center;
text-shadow: -1px -1px 0 #000, 0 0 0 #fff;
}
/* 文字凸效果。 */
h1:nth-of-type(2) {
text-shadow: -1px -1px 0 #fff, 0 0 0 #000;
}
</style>
</head>
<body>
<h1>1111111111</h1>
<h1>1111111111</h1>
</body>
</html>
10.文字边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
h1 {
font-size: 50px;
text-align: center;
/* 文字边框属性，IE不支持。-webkit，表示是一个测试属性。 */
-webkit-text-stroke: 2px red;
}
</style>
</head>
<body>
<h1>11111111</h1>
</body>
</html>
11.文字裁剪属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
h1 {
font-size: 50px;
text-align: center;
background: url("img/mm.jpg") no-repeat 0 0;
/* 文字裁剪属性-webkit-background-clip是一个测试属性，会沿边框裁剪。 */
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h1>11111111</h1>
</body>
</html>
12.盒子阴影属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background: pink;
margin: 100px auto;
/* 1 盒子阴影属性box-shadow可以是多组，每组数据用逗号隔开。 */
/* 2 盒子阴影属性box-shadow值：水平偏移 垂直偏移 模糊程度 扩展 颜色。 */
box-shadow: 10px 10px 0 0 red, -10px -10px 0 0 yellow;
}
.box2 {
width: 200px;
height: 200px;
background: pink;
margin: 100px auto;
/* 3 盒子阴影属性box-shadow，默认是outset，向外阴影；inset，向内阴影。 */
box-shadow: 10px 10px 0 0 red inset, -10px -10px 0 0 yellow inset;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
13.练习-立体球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 300px;
height: 300px;
margin: 200px auto;
background: #fff;
/* 通过向内阴影实现立体球效果。 */
box-shadow: -30px -29px 55px 8px #000 inset;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
14-背景剪裁属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 300px;
height: 300px;
/* 1 默认背景图会平铺到所有区域，即盒子的content+padding+border区域，可以通过背景剪裁属性来设置背景图可见区域。 */
background: url("img/4.png") repeat 0 0;
margin: 100px auto;
padding: 100px;
border: 50px solid rgba(0,0,255,.3);
/*
2 background-clip，背景剪裁属性，通过background-clip可以设置背景平铺开始的区域。
background-clip的默认值是border-box，所以背景图会平铺到content+padding+border区域，从边框区域可见。
padding-box，从padding可见。
content-box，从content区域可见。
*/
background-clip: content-box;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
15.练习-京东小圆点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background: red;
}
.box ol li {
width: 50px;
height: 50px;
background: blue;
float: left;
margin: 50px;
border-radius: 50%;
border: 20px solid rgba(255, 255, 255, .5);
/*
背景剪裁，如果不进行背景剪裁，背景蓝色就会显示到边框区域，覆盖边框设置的颜色，
所以设置背景剪裁，使得背景设置的blue蓝色不会显示的边框区域。
*/
background-clip: padding-box;
}
</style>
</head>
<body>
<div class="box">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
16.背景起始位置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 300px;
height: 300px;
background: url("img/4.png") no-repeat 0 0;
margin: 100px auto;
padding: 100px;
border: 50px solid rgba(0,0,255,.3);
/*
background-origin设置背景起始位置。
border-box，背景起始位置在border区域。
padding-box，默认值，背景起始位置在padding区域。
content-box，背景起始位置在content区域。
*/
background-origin: content-box;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
17.背景缩放属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 1200px;
height: 600px;
background: url("img/4.png") no-repeat 0 0;
border: 1px solid red;
}
.box1:hover {
/* 1 background-size，图片等比例缩放属性。 */
/* 2 宽高缩放后为600px 300px。 */
/*background-size: 600px 300px;*/
/* 3 宽高缩放后为背景图所在元素宽的50%，高的50%。 */
/*background-size: 50% 50%;*/
/* 4 宽和高缩放后都为600px。 */
/*background-size: 600px;*/
/* 5 宽缩放后为背景图所在元素宽的50%，高进行等比例缩放。 */
/*background-size: 50%;*/
/* 6 图片按照盒子最长边铺满，为了保证图片不变形，图片会有一部分被剪裁。cover经常使用。 */
/*background-size: cover;*/
/* 7 图片按照盒子最短边铺满，为了保证图片不变形，盒子会有一部分留白。 */
background-size: contain;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
18.滚动背景和固定背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
height: 3000px;
}
.box1 {
width: 200px;
height: 200px;
background: url("img/4.png") no-repeat 0 0;
border: 1px solid #000;
/*
1 scroll是background-attachment的默认值，表示滚动背景。
背景图默认在盒子的左上。
当页面滚动时，盒子会随着页面移动，背景图会随着页面移动。
*/
background-attachment: scroll;
}
.box2 {
width: 200px;
height: 200px;
background: url("img/4.png") no-repeat 0 0;
border: 1px solid #000;
/*
2 fixed表示固定背景，背景图的参考点是永远是浏览器窗口。
当页面滚动时，背景图是不动的。
给元素设置了背景图之后，当该元素经过浏览器窗口位置时就可以看到该图片。
*/
background-attachment: fixed;
margin-top: 500px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
19.练习-qq背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div:nth-of-type(1) {
height: 956px;
background: url("img/01.jpg") no-repeat center 0;
}
div:nth-of-type(2) {
height: 321px;
background: url("img/02.png") no-repeat center 0;
}
section:nth-of-type(1) {
height: 650px;
background: url("img/03.jpg") no-repeat 0 0;
/* 铺满盒子 */
background-size: cover;
/* 固定背景。 */
background-attachment: fixed;
}
div:nth-of-type(3) {
height: 321px;
background: url("img/02.png") no-repeat center 0;
}
section:nth-of-type(2) {
height: 650px;
background: url("img/04.jpg") no-repeat 0 0;
background-size: cover;
background-attachment: fixed;
}
div:nth-of-type(4) {
height: 321px;
background: url("img/02.png") no-repeat center 0;
}
section:nth-of-type(3) {
height: 650px;
background: url("img/05.jpg") no-repeat 0 0;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<div></div>
<div></div>
<section></section>
<div></div>
<section></section>
<div></div>
<section></section>
</body>
</html>
20.多重背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
/* 背景可以设置多个，每个背景之间使用逗号隔开。 */
background: url("img/4.png") no-repeat 0 0, url("img/bg.png") no-repeat 0 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
21.过滤器模糊属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
border: 1px solid #000;
position: relative;
/* 图片使用filter: blur(5px);模糊会变大，所以需要使用overflow: hidden;移除隐藏。 */
overflow: hidden;
}
.box img {
/* 过滤器，blur模糊。 */
filter: blur(5px);
}
.box h5 {
position: absolute;
left: 50%;
top: 50%;
color: red;
font-size: 30px;
}
.cover {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<!-- jfif格式图片的特点是，尺寸小，但是清晰。 -->
<img src="img/timg.jfif" alt="">
<h5>付费观看</h5>
</div>
<!-- 全屏遮罩。 -->
<div class="cover"></div>
</body>
</html>
浙公网安备 33010602011771号