边框的妙用 基本的边框变换 1.https://www.cnblogs.com/youyoui/p/4855748.html
2.https://segmentfault.com/a/1190000010160618(实现等高两栏布局不会理解）
伪元素的妙用
参考两篇文章：1.http://www.cnblogs.com/coco1s/p/5528393.html
2.http://www.myexception.cn/HTML-CSS/2115544.html
利用伪元素和边框制作太极八卦图的效果 http://www.gbtags.com/gb/gbtutorials/963.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/*CSS源代码*/
body{
background:#CFCFCF;
}
.taiji{
width: 96px;
height: 48px;background: #eee;
border-color: #000;
border-style: solid;
border-width:2px 2px 50px 2px;
border-radius: 50%;
position: relative;
}
.taiji:before{
content: "";
position: absolute;
top:50%; left:0;
width: 12px;
height:12px;
background: #fff;
border-radius: 50%;
border:18px solid #000;
}
.taiji:after{
content: "";
position: absolute;
top:50%; left:50%;
width: 12px;
height:12px;
background: #000;
border-radius: 50%;
border:18px solid #eee;
}
</style>
</head>
<body>
<div id="container">
<div class="taiji"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/*CSS源代码*/
body{
background:#CFCFCF;
}
.taiji{
width: 96px;
height: 48px;background: #eee;
border-color: #000;
border-style: solid;
border-width:2px 2px 50px 2px;
border-radius: 50%;
position: relative;
}
.taiji:before{
content: "";
position: absolute;
top:50%; left:0;
width: 12px;
height:12px;
background: #fff;
border-radius: 50%;
border:18px solid #000;
}
.taiji:after{
content: "";
position: absolute;
top:50%; left:50%;
width: 12px;
height:12px;
background: #000;
border-radius: 50%;
border:18px solid #eee;
}
</style>
</head>
<body>
<div id="container">
<div class="taiji"></div>
</div>
</body>
</html>
1444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
