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

最新推荐文章于 2022-08-17 22:38:30 发布

zhanghao86_

最新推荐文章于 2022-08-17 22:38:30 发布

阅读量456

点赞数

分类专栏： web前端文章标签： css3 css3选择器 css3属性 css3-background css3-border

本文链接：https://blog.csdn.net/zhanghao86_/article/details/77165567

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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