css3选择器、背景、边框、渐变、阴影以及文本效果的介绍及实现

来源：互联网发布：qq采集分析软件编辑：程序博客网时间：2024/05/29 03:15

HTML代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="style.css"></head><body><div>    <h3>111</h3>    <p>aaa</p>    <p>aaa</p>    <p>aaa</p></div><a href="#cca.pdf">aaa</a><a href="https://www.baidu.com">bbb</a><div class="bg-container">    ssssnkankankankagknakngangkag</div><div class="gradient"></div><p class="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 solid rgba(206,221,10,0.5);    background: url("kebi.png") ;    /*设置背景图片原点位置*/    background-origin: content-box;    /*设置背景图片的裁剪方式*/    background-clip: content-box;    /*设置背景图片是否跟随滚轮滚动*/    background-attachment: fixed;    /*设置边框图片资源路径*/    border-image-source: url("https://mdn.mozillademos.org/files/4127/border.png");    /*设置边框图片的向内偏移量 以九宫格的方式截取*/    border-image-slice: 81 54 27 54;    /*设置边框图片的宽度*/    border-image-width: 100px 100px;    /*设置边框在外部绘制的范围*/    border-image-outset: 50px;    /*添加阴影(水平阴影位置-必选可负，垂直阴影位置-必选可负，模糊距离-可选，阴影大小-可选，阴影颜色-可选，从外层的阴影（开始时）改变阴影内侧阴影-可选)*/    box-shadow: #e348ff 20px 3px 20px, #ff2432 20px 3px 20px;}

渐变相关代码：

.gradient{    width: 500px;    height: 500px;    /*background-color: #ff3c29;*/    /*线性渐变linear-gradient(方向(top bottom left right组合使用或者使用角度:45deg), 开始的颜色-颜色占有的空间大小或比例(数字或百分比), ...,结束的颜色-颜色占有的空间大小或比例(数字或百分比))*/    background: linear-gradient(45deg,red 10%,blue 60%,white 80%);    /*径向渐变radial-gradient(渐变的中心的位置, 形状(椭圆、圆) 大小, 开始的颜色-颜色占有的空间大小或比例(数字或百分比), ...,结束的颜色-颜色占有的空间大小或比例(数字或百分比))*/    background: radial-gradient(circle 30px ,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: 10px 10px 2px red;    /*word-break(换行): normal(浏览器默认换行规则)|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行);*/    /*word-break: keep-all;*/    /*word-wrap(允许长的内容可以自动换行): normal(只在允许的断字点换行（浏览器保持默认处理）)|break-word(在长单词或 URL 地址内部进行换行);*/    word-wrap: break-word;}

阅读全文

0 0