伪元素
页面中的每一个元素中都默认遗憾这有两个子元素
before ：在什么什么之前
after ：在什么什么之后
但是可以作为一个真正的元素承载内容，（有区别）
离不开 content的样式值】
before:在首标签的结束位置，内部元素之前before在什么什么之前
<style>
/*要与 content连用*/
div:before{
content: "子曰：";
color: red;
width: 500px;
display: inline-block;
}
</style>
<div>
三人行，必有我师焉！！！
</div>before使用
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 500px;
background-color: #f00;
margin:0 auto;
margin-top: 100px;
/*border-top: 1px solid #f00;*/
}
p{
width: 200px;
height: 200px;
background-color: #ff0;
margin:0 auto;
margin-top: 150px;
}
div:before{
content: "";
display: table;
}
/*伪元素可以作为一个元素，但是如果使用选择器 无法定位，
伪元素的定位就是使用伪元素
*/
/*div :first-child{*/
/*width: 100px;*/
/*height: 100px;*/
/*background-color: cyan;*/
/*}*/
</style>
<div>
<p></p>
</div>after 在什么什么之后
<style>
div:after{
content: "_____鲁迅";
}
</style>
<body>
<div>时间就像海绵里的水，挤一挤总会有的</div>after使用
<style>
* {
margin: 0;
padding: 0;
}
ul {
border: 5px solid #000;
list-style-type: none;
}
ul > li {
width: 200px;
height: 200px;
border: 5px solid #f00;
float: left;
}
ul :nth-child(2n) {
background-color: #0f0;
}
div {
width: 300px;
height: 300px;
background-color: #ccc;
/*1方式1*/
/*clear: both;*/
}
/*h1{*/
/*clear: both;*/
/*}*/
ul:after{
content: "";
display: block;
clear: both;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<!--<h1></h1>-->
</ul>
<div>呵呵</div>content
content中的值
1 字符串
2 url（）
3 元素的属性值
<style>
div:before{
/*content: "《";*/
/*content: url("zlb.jpg");*/
content: attr(data-content);
}
div:after{
content: "》";
}
</style>
<div data-content="鸣人《">朱连宝</div>计数器的使用
1，定义一个计数器
2，规定范围，给那个标签添加
3，计数器的数值变化
<style>
body{
counter-reset: total ;
/*counter-reset: total 数值;*/ /*数值表示的是初始值 若不给默认是0*/
}
h1:before{
content: "同学"counter(total)"号，是>>>>>>>";
}
h1{
counter-increment: total ;
/*counter-increment: total 数值;*/ /*数值若不添加则表示的是1 若添加则表示倍数*/
}
</style>
<h1>朱连宝</h1>
<h1>李明轩</h1>
<h1>无 非</h1>
<h1>长 江</h1>分页
当前屏被分为几块
column-count: 3;
块与块之间的间距
column-gap: 30px;
间距线
column-rule: 1px solid red;
<style>
div{
/*当前屏被分为几块*/
column-count: 3;
/*块与块之间的间距*/
column-gap: 30px;
/*间距线*/
column-rule: 1px solid red;
}
</style>
<div>
到洛阳出差一周了。
下午忙完，我便决定回趟老家。夕阳余光游走在城市楼房的轮廓中，呆板大街上车来人往。我不喜欢城里的热闹，会吓跑夕阳，家里这时候，风是轻的，田野是静的，夕阳是害羞的。
大巴车只到镇上，离老家还有十里路。一下车就听到有人喊我，是父亲。父亲一手接过我行李，一手拿着手机说话：“接到了，接到了，我们就回来。”说罢把电话递给我。电话里母亲问我晚饭想吃什么，我说：“妈，我想吃你擀的捞面条。”
门前小土坡在夜色下显得有些陌生而拘谨，似乎把我当成远方客人。得知我要回来，一进门就看到母亲正朝着门口快步走来，她打量着我一直笑，拉我进屋。
“快坐下，坐车很难受吧？”母亲像个得到心爱玩具后的孩子般兴奋，我便坐在沙发上。
“去洗洗手吧，一路上出汗多”，我刚要起身，母亲又赶忙示意我别动，对我说：“我给你端来，你别起来。”不等我回话，转身到院子里了。
</div>半色字
<style>
span{
font-size: 100px;
font-weight: bold;
/*background-color: #ccc;*/
position: relative;
}
i{
font-size: 100px;
font-style:normal;
color: cyan;
/*background-color:rgba(255,255,255,0);*/
position: absolute;
width: 50%;
overflow: hidden;
}
u{
text-decoration: none;
font-size: 100px;
font-weight: bold;
position: relative;
}
u:before{
content: "H";
font-size: 100px;
font-style:normal;
color: cyan;
position: absolute;
width: 50%;
overflow: hidden;
}
</style>
<span><i>H</i>H</span>
<u>
H
</u>圆角
border-radius:
<style>
div{
width: 500px;
height: 500px;
background-color: #f00;
margin: auto;
/*倒角
边框的倒角
*/
/*border-radius: 50px;*/
/*border-radius: 250px;*/
/*border-radius: 50%;*/
/*记录 当设置的圆角半径远远大于实际半径的时候最终的效果也是一个圆*/
/*border-radius: 1250px;*/
/*可以分别每个角设置*/
/*border-top-left-radius: 10px;*/
/*border-top-right-radius: 40px;*/
/*border-bottom-left-radius: 80px;*/
/*border-bottom-right-radius: 150px;*/
padding: 100px;
border: 100px solid #000;
/*圆角的结算注意 是指你当前的盒子的大小*/
/*border-radius: 450px;*/
border-radius: 50%;
}
</style>
<div></div>盒子阴影
box-shadow: 330px 10px 10px 10px red inset;
<style>
div{
width: 200px;
height: 300px;
background-color: #00ffd5;
border: 1px solid #000;
margin: auto;
/*盒子阴影 虚化的产物， 1 不占位，只是美观效果
值1 x轴方向的阴影位置 0与元素重叠 看不到 小于0 向左移动 大于0 向右移动
值2 y轴方向的阴影位置 0与元素重叠 看不到 小于0 向上移动 大于0 向下移动
值3 模糊度 当小于0 则 不见了 大于0 值越到越模糊
值4 模糊距离 正值 越来越大 负值 越来越小
值5 阴影色
值6 内外阴影 默认外部阴影 inset 内部阴影
*/
box-shadow: 330px 10px 10px 10px red inset;
}
/*p{*/
/*width: 200px;*/
/*height: 300px;*/
/*background-color: yellow;*/
/*border: 1px solid #000;*/
/*margin: auto;*/
/*}*/
</style>
<div></div>
<p></p>文本阴影和盒子阴影差不多，只是参数少了 text-shadow: 20px 40px 10px cyan ; 文本 x y 模糊度 阴影色 注意：没有模糊距离 和 内阴影选项 若不给设置 阴影颜色 则默认是文本的颜色
div{
color: red;
text-align: center;
font-size: 150px;
font-weight: bold;
/*字间距*/
letter-spacing: 100px;
text-shadow: 20px 40px 10px cyan ;
}
</style>
<div>H A S</div>背景的绘制区域设置
扫描二维码关注公众号，回复：
9224511 查看本文章
background-clip:
div{
width: 500px;
height: 500px;
border: 50px dashed #000;
padding: 100px;
background-color: #ccc;
margin: auto;
background-image: url("imgs/smiley.gif");
/*边框内部开始计算*/
/*background-clip: border-box;*/
/*内边距内部开始计算*/
/*background-clip: padding-box;*/
/*内容去内部开始计算*/
background-clip: content-box;
}
</style>
<div></div>线性渐变：在操控的是背景色（但是此时使用的确实背景图）
background-image: linear-gradient(red,yellow,cyan,green);
角度单位是deg 默认使用的效果是：180deg 0deg 从下到上 90deg 从右到左 180deg 从上到下 270deg 从左到右
div{
width: 500px;
height: 500px;
border: 1px solid #000;
/*渐变色自动均分*/
/*background-image: linear-gradient(red,yellow,cyan,green);*/
/*定义及那边区域*/
/*background-image: linear-gradient(red 0%,yellow 50%);*/
/*多色定义渐变区域*/
/*background-image: linear-gradient(red 10%,yellow 20%,cyan 30%,green 40%);*/
/*没有渐变区域的背景色*/
/*background-image: linear-gradient(red 50%,yellow 50%);*/
/*定义角度的线性渐变*/
/*background-image: linear-gradient(270deg, red ,yellow );*/
/*
角度单位是deg
默认使用的效果是：180deg
0deg 从下到上
90deg 从右到左
180deg 从上到下
270deg 从左到右
*/
/*background-image: linear-gradient(red 50px,yellow 150px);*/
background-image: linear-gradient(red 0%,yellow 150%);
}
</style>
<div></div>线性渐变重复
background-image: repeating-linear-gradient(red 0px,rgba(255,255,0,0.2) 50px);
<style>
div{
width: 500px;
height: 500px;
border: 1px solid #000;
/*background-image: linear-gradient(red 0px,yellow 50px);*/
background-image: repeating-linear-gradient(red 0px,rgba(255,255,0,0.2) 50px);
}
</style>
<div></div>径向渐变
background-image: radial-gradient(red 0,yellow 50% ,cyan 100%);
div{
width: 1500px;
height: 500px;
border: 1px solid #000;
/*background-image: radial-gradient(red 0,yellow 50% ,cyan 100%);*/
/*径向渐变的特殊点
默认是椭圆效果
*/
/*若此时可以设置形状则是根据为容器的形状而定*/
/*background-image: radial-gradient( circle , red 0,yellow 50%);*/
/* 定义线性渐变的为止center top bottom left right xp % */
/*background-image: radial-gradient( ellipse at center, red 0,yellow 50%);*/
/*background-image: radial-gradient( ellipse at 1000px 200px, red 0,yellow 10%);*/
/*定义渐变圆的大小 半径 */
/*background-image: radial-gradient(200px 800px at 1000px 200px, red 0,yellow 100%);*/
/*background-image: radial-gradient(500px 200px at center ,red 00% ,yellow 80%);*/
}
</style>
<div></div><style>
div{
width: 1500px;
height: 500px;
border: 1px solid #000;
background-image: radial-gradient(200px 200px at 0 0 ,red 00% ,yellow 80%);
}
</style>
<div></div>径向渐变重复
background-image: repeating-radial-gradient(250px 250px at center,hotpink 0,cyan 50px);
<style>
div{
width: 500px;
height: 500px;
border: 1px solid #000;
/*background-image: linear-gradient(red 0px,yellow 50px);*/
background-image: repeating-radial-gradient(250px 250px at center,hotpink 0,cyan 50px);
border-radius: 50%;
}
</style>
<div></div>自定义字体
@font-face
<style>
div{
font-size: 20px;
letter-spacing: 30px;
text-align: center;
/*font-family:"宋体","微软雅黑";*/
/*使用自己的字体*/
font-family: ziJiZiDingYi;
}
/*自定义字体*/
@font-face {
font-family: ziJiZiDingYi;
/*网络中的字体 有些字体是放在自己加的服务器上的，你自己加服务器中的个字体路径*/
/*src: url("http://www.w3cschool.css/css3/Sansation_Light.ttf");*/
/*当前的字体跟着自己的工程结构走 同样是放在自己加的服务器上*/
src: url("simkai.ttf");
}
</style>
<div>
我是一个好人,你信吗?<br>
差点...
</div>