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

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

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

css3倒圆角边框,css3实现圆角边框渐变
原标题:css3实现圆角边框渐变渐变的形式:可选参数有两种方式- 1.设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换. 2.使用关键字,left代表从左到右,top ...
CSS3选择器、边框、背景、按钮
1.CSS3概述 (1).CSS3简介如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性,弥补了CSS2的众多不足之处,使得Web开 ...
08.CSS3选择器、边框、背景、按钮
CSS3概述 CSS3简介如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高 ...
CSS3学习，常用常记（文本效果，字体）
CSS3 的文本阴影 CSS3 中,text-shadow属性适用于文本阴影. 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色: h1{text-shadow: 5px 5px 5px #FF ...
PHP怎么设置字体走马灯效果,微信小程序怎么设置背景颜色渐变以及字体走马灯效果（高考倒计时）...
效果图: 图1 图2 一.背景颜色渐变 1.wxml文件高考广播:距2020高考仅剩{{countdown}}天 2.wxss文件 .Broadcast{ position:relative; ri ...
CSS3实现背景颜色渐变
background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(255,0,0)), color-stop(0.5 ...
css动态阴影,css实现动态阴影、蚀刻文本、渐变文本效果
css实现动态阴影创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: .dynamic-shadow-parent { position: relative; z-index ...
php背景时间渐变,CSS3怎么实现背景颜色渐变？（图文+视频）
本篇文章主要给大家介绍css3背景渐变的实现方法总结. 我们在前端开发过程中,为了丰富网站样式内容,那么背景色渐变就有很不错的视觉效果.所谓CSS3 渐变(gradients)也就是可以让你在两个或多 ...
CSS3新特性详解(二)：CSS3 字体@font-face详解、如何创建和修改woff字体文件及text-shadow等文本效果
关于CSS3新特性,在上篇博文中"CSS3新特性详解(一):CSS3选择器.边框.背景使用细节及案例演示",讨论了CSS3选择器.边框和背景,本文讨论字体@font-face使 ...

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

HTML代码：

选择器相关css：

具体选择器参照上图

背景、边框、盒子阴影相关css代码：

渐变相关代码：

文字样式相关代码：

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

最新文章

热门文章