HTML代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="style.css"></head><body><div><h3>111</h3><p>aaa</p><p>aaa</p><p>aaa</p></div><ahref="#cca.pdf">aaa</a><ahref="">bbb</a><divclass="bg-container">ssssnkankankankagknakngangkag</div><divclass="gradient"></div>
<pclass="text">初夏的广场上，没有了行人。雨飘零在梧桐林中，栀子花散发出诱人的清香backgroundadadadasdsdsdsda。 广场上，依然灯火通明，霓虹灯依然像过去那样，静静的照耀着广场中心的喷水池。透过那层雨幕去看广场，空旷，寂静background。 我独自一人站在那棵梧桐树边。在雨中，梧桐树叶飘飘洒洒。纷飞的树叶像一只只蝴蝶落在我灰色的外衣上。 风吹过我垂在眼前的头发，雨停了。广场上依旧像从前那样美丽，backgroundaadadad宁静。 3年了，background这里的景色依旧未曾改变，还是那样清幽。栀子花的白花瓣，依然像3年前那样，雪白。 当我走进广场时backgroundsdasdasdadad，一种朦胧的亲切感扑面。如同阔别重逢的亲人一般，那样熟悉。</p>
</body></html>
选择器相关css：
h3~p{color:#fb3234;}a[href^="#"]{color:#9dff52;}a[href$="com"]{color:#fff44d;}a[href$="pdf"]{color:#56e6ff;}a[href*="a"]{color:#8869ff;}:root{background-color:#322dff;}
具体选择器参照上图
背景、边框、盒子阴影相关css代码：
.bg-container{width: 500px;height: 500px;padding: 30px;border:20px solidrgba(206,221,10,0.5);background:url("kebi.png") ;/*设置背景图片原点位置*/background-origin:content-box;/*设置背景图片的裁剪方式*/background-clip:content-box;/*设置背景图片是否跟随滚轮滚动*/background-attachment:fixed;/*设置边框图片资源路径*/border-image-source:url("/files/4127/border.png");/*设置边框图片的向内偏移量 以九宫格的方式截取*/border-image-slice: 81 54 27 54;/*设置边框图片的宽度*/border-image-width: 100px100px;/*设置边框在外部绘制的范围*/border-image-outset: 50px;/*添加阴影(水平阴影位置-必选可负，垂直阴影位置-必选可负，模糊距离-可选，阴影大小-可选，阴影颜色-可选，从外层的阴影（开始时）改变阴影内侧阴影-可选)*/box-shadow:#e348ff20px3px20px,#ff243220px3px20px;}
渐变相关代码：
.gradient{width: 500px;height: 500px;/*background-color: #ff3c29;*/ /*线性渐变linear-gradient(方向(top bottom left right组合使用或者使用角度:45deg),开始的颜色-颜色占有的空间大小或比例(数字或百分比), ...,结束的颜色-颜色占有的空间大小或比例(数字或百分比))*/background:linear-gradient(45deg,red10%,blue60%,white80%);/*径向渐变radial-gradient(渐变的中心的位置,形状(椭圆、圆)大小,开始的颜色-颜色占有的空间大小或比例(数字或百分比), ...,结束的颜色-颜色占有的空间大小或比例(数字或百分比))*/background:radial-gradient(circle30px,red,blue);}
文字样式相关代码：
.text{width: 200px;height: 200px;/*设置文本溢出的样式text-overflow(clip:直接裁剪-必须配合overflow：hidden使用、ellipsis：用...代替溢出的文本-必须配合overflow: hidden;white-space:nowrap;使用、string：自定义字符串代替溢出的文本)*/text-overflow:clip;overflow:hidden;/*white-space:nowrap;*/ /*文字阴影：text-shadow(水平阴影位置,垂直阴影位置,模糊距离,阴影颜色)*/text-shadow: 10px10px2px red;/*word-break(换行): normal(浏览器默认换行规则)|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行);*/ /*word-break: keep-all;*/ /*word-wrap(允许长的内容可以自动换行): normal(只在允许的断字点换行（浏览器保持默认处理）)|break-word(在长单词或URL地址内部进行换行);*/word-wrap:break-word;}
