您的位置：首页 > Web前端 > CSS

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

2017-08-14 19:32 1251 查看

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;
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航