CSS3学习总结（css3选择器、css3新属性...）

已于 2022-10-21 11:22:43 修改
阅读量611 收藏 1
点赞数
分类专栏： 知识总结 文章标签： css css3 前端
于 2021-04-12 22:06:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ksx2333/article/details/115640023
版权
本文详细讲解了CSS3的选择器（包括属性选择器、关系选择器和伪类选择器），新引入的透明度、圆角、阴影和背景属性，以及如何让旧版IE支持CSS3特性。涵盖了圆角、阴影效果的实现，背景渐变和多背景的应用，以及关键的兼容性处理策略。
摘要由CSDN通过智能技术生成

文章目录

1 css3介绍

  CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。（百度百科）
  CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。（百度百科）

浏览器前缀

被w3c采纳之前的写法：各前缀是区分各个浏览器厂商。

-webkit-border-radius:220px; /* chrome和safari支持 */
-ms-border-radius:220px;  /* Microsoft IE */
-moz-border-radius:220px; /*  firefox */
-o-border-radius:200px;  /* opora  */
border-radius: 220px;   /* 被w3c采纳之后的写法 */

2 css3选择器

2.1 属性选择器

选择器[属性1][属性2]…（选择居有该属性的元素，添加样式）
选择器[属性名^=属性值]（选择具有该属性且以该属性值开头的元素）
选择器[属性名$=属性值]（选择具有该属性且以该属性值结尾的元素）
选择器[属性名*=属性值]（选择具有该属性且其属性值中含有此属性值的元素）
选择器[属性名~=属性值]（选择具有该属性且其属性值中此属性值是以空格分隔的独立部分）
写法例：

     /* 选择具有alt属性的图片 加橙色边 */
     img[alt]{
         border:3px solid orange
     }
     /* 选择具有title属性的图片 加灰色边  */
     img[title]{
         border:3px solid grey
     }
     /* 选择具有title属性 且title属性为"小狗" 给黑边 */
     img[title='小狗']{
         border:3px solid black
     }
     /* 选择具有title属性 且title属性以"猫"为开头 给红边 ^  */
     img[title^="猫"]{
         border:3px solid red
     }

     /* 选择具有title属性 且title属性以"猫"为结尾 给紫色边 $  */
     img[title$="猫"]{
         border:3px solid purple
     }
     
     /* 选择具有title属性 且title属性包含"猫"   给蓝边 *  */
     img[title*="猫"]{
         border:3px solid blue
     }

     /* 具有alt属性 并且alt属性中"猫"是以空格分隔的独立部分 加绿色边 */
     img[alt~="猫"]{
         border:3px solid green
     }
     /* 多属性 既有title又有alt */
     img[title][alt]{
         border:3px solid rebeccapurple
     }

     /* 选择具有.cartoon 加橙色边 */
     img[class~="cartoon"]{
         border:3px solid orange
     }

2.2 关系选择器

空格 后代选择器
+ 下一个兄弟
~ 下边所有的兄弟
> 儿子选择器

例：

        /* 选择section的后代 加蓝色边框 */
        section div{
            border:1px solid blue
        }
        /* 选择widow后面紧挨下一个兄弟div，加绿边 */
        .widow + div{
            border:3px solid green
        }
        /* 选择 widow下边所有的兄弟姐妹 */
        .widow ~ div{
            border:3px solid red
        }
        /* 选择section 的第一代p 子代 加橙色边框 */
        section > p{
            border:3px solid orange
        }

2.3 伪类选择器

2.3.1 伪类选择器之child、type

注意：在IE8的之前版本必须声明<!DOCTYPE> ，这样才能生效。
  nth-child规定的父元素对应的子元素，指所有子元素，若是恰好第n个元素标签不为所选标签，则无效果。
p:first-child 选择属于其父元素的首个子元素的每个p元素，并为其设置样式。
p:last-child 选择属于其父元素最后一个子元素每个 p元素。
p:only-child 选择属于其父元素的唯一子元素的每个 p元素。（就是这个盒子里只有这一个元素且为p元素的）
img:nth-child(n) 规定属于其父元素的第n个子元素的标签(img)（包括其子标签）的样式。
  nth-of-type则不一样，针对同级兄弟元素，只判断和自己一样的元素
p:first-of-type 选择属于其父元素的首个p元素，并为其设置样式。
p:last-of-type 选择属于其父元素最后一个p元素。
p:only-of-type 选择属于其父元素的唯一p元素。（就是这个盒子里只有这一个p元素的，同时可以存在别的元素）
img:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。（必须同级，只匹配兄弟img）
n 可以是数字、关键词或公式。
数字：1~100+
关键词：odd：匹配下标是奇数 和 even：匹配下标是偶数 的子元素的关键词（第一个子元素的下标是 1）。
公式：例如：2n+1（匹配3、5、7…）
例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 100px;
        }

        /* 选择属于其父元素的第二个p设置样式（如果该父元素第二个子元素不是p则不成立） */
        p:nth-child(4) {
            border: 3px solid orange
        }

        /* 选择属于其父元素的所有p标签为奇数的元素。 */
        p:nth-child(odd) {
            border: 10px solid rgb(88, 79, 212);
        }

        /* 选择属于其父元素的前三个p的元素 */
        p:nth-child(-n+2) {
            border: 10px solid rgb(223, 31, 31)
        }

        h1:only-child {
            border: 10px solid rgb(39, 194, 78)
        }
    </style>
</head>

<body>
    <div>
        <h1>葫芦娃</h1>
    </div>
    <div>
        <h1>葫芦娃</h1>
        <p>大娃</p>
        <p>大娃</p>
        <p>大娃</p>
        <p>大娃</p>
    </div>
    <p>二娃</p>
    <p>三娃</p>
    <p>四娃</p>
    <div>
        <p>五娃</p>
        <p>六娃</p>
        <p>七娃</p>
    </div>
</body>

</html>

效果图：在这里插入图片描述

2.3.2 伪类选择器之link、visited、hover、active

:link 选择器设置所有未访问链接的样式（对已经访问的链接没有样式。）
:visited 选择器设置访问过的页面链接的样式，
:hover 选择器当有鼠标悬停在其上的链接样式，
:active 选择器设置当你点击链接时的样式。
注意：
   a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
  a:active 必须在 a:hover 之后。

2.3.3 伪类选择器之新增表单

针对表单元素（input）
:focus input:focus 选择元素输入后具有焦点
:disabled 选择所有禁用的表单元素（disabled="disabled"禁用）
:enabled 选择所有启用的表单元素（默认启用）
:lang 向带有指定 lang 属性开始的元素添加样式。
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
测试源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器4</title>
	<style>
		fieldset {
			margin: 50px;
			padding: 20px;
			line-height: 40px;
		}
		/*当表单元素处于焦点时*/
		input[type="text"]:focus {
			background-color: #f40;
		}
		/*当表单元素处于被选中状态时*/
		input[type="radio"]:checked+label {
			font-weight: bold;/* 字体加粗 */
		}
		/* 点击判断是否勾选agree，默认是禁用属性，是则去掉禁用属性 */
		#nextStep:disabled {
			background-color: #ccc;
		}
		#nextStep:enabled {
			font-weight: bold;
			font-style: italic;
		}
		p:lang(zh) {
			font-family: "微软雅黑";
		}
		p:lang(en) {
			font-family: Verdana, Geneva, sans-serif;
		}
	</style>

	<script>
		window.onload = function () {
			var agree = document.getElementById('agree');
			var nextStep = document.getElementById('nextStep');

			agree.onclick = function () {
				//当用户点击checkbox的时候，需要判断，这个agree是否是选上状态。如果是，则nextStep可用。否则，nextStep不可用
				if (agree.checked == true) {
					nextStep.disabled = false;
				} else {
					nextStep.disabled = true;
				}
			}
		}
	</script>
</head>

<body>
	<fieldset>
		<legend>表单</legend>
		<form action="">
			<label for="">姓名：</label>
			<input type="text" name="username" id="username"><br>

			<label for="">性别：</label>
			<input type="radio" name="sex" id="man" value="">男
			<input type="radio" name="sex" id="woman" value=""><label for="woman">女</label>
			<input type="radio" name="sex" id="baomi" value=""><label for="baomi">保密</label><br>
			<input type="checkbox" id="agree"><label for="agree">我同意以上协议</label><br>
			<input type="button" value="上一步">
			<input type="button" value="下一步" id="nextStep" disabled>
		</form>
	</fieldset>

	<fieldset>
		<legend>lang</legend>
		中文简体
		<p lang="zh">中文简体</p>
		Ti Amo
		<p lang="en">Ti Amo</p>
	</fieldset>
</body>

</html>

效果图：在这里插入图片描述

2.3.4 伪类选择器之空、非

:empty选择器选择每个没有任何子级的元素（包括文本节点）。针对非行内元素
:not(selector) 选择器匹配每个非selector的元素。

	/*空元素*/
	li:empty{
		height: 20px;width: 20px;
		background-color: gold;
	}
	/*给h1内为空的h1添加样式*/
	h1:empty{
		height: 20px;width: 20px;
		background-color: rgb(35, 150, 70);
	}

	/*给非空的li加灰色下底边*/
	li:not(:empty){
		border-bottom:1px dashed gray;
	}
	/*具有非.special类的li标号字体颜色显示#5f5f5f*/
	li:not(.special){
		color:#5f5f5f;
	}
	/*除第一个外，其它li的标号背景色显示为#29b6e9*/
	li:not(:first-child)>b{
		background-color:#29b6e9;
	}
2.3.5 伪类选择器之target

作为属性的target常用属性：_blank新窗口打开链接；_self默认本窗口打开链接
这里主要是说明作为伪类选择器的target
＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。
:target 在到达锚点的时候同时设置样式。

        /* 锚记 */
        h2:target{
            color:red;
        }

<a href="#title1">CSS（层叠样式表）</a>
<h2 id="title1">CSS (层叠样式表)</h2>
点击a就会跳转到id为title1的元素（h2）位置上。（并且赋予样式）

2.4 伪元素选择器

::before 伪元素可用于在指定元素内容之前插入一些内容。
::after 伪元素可用于在指定元素内容之后插入一些内容。
  在IE8中，进入了:before和:after这两个伪类，但是在IE9中，将这两个伪类归位了伪元素。但同样支持以前伪类的写法。
::selection 伪元素向用户选择的元素部分添加样式。（鼠标选中部分）
::first-line 伪元素用于向指定元素中的文本的首行添加特殊样式。
::first-letter 伪元素用于向指定元素中的文本的首字母添加特效样式。

         /* 在section盒子前面插入以下内容 */
         section::before{
             content:"在前边插入的内容";
             width:200px;
             height:200px;
             border:1px solid #000;
             display: block;
         }
         /* 在section盒子后面插入以下内容*/
         section::after{
             content:"";
             display: block;
             clear:both;  /* 清除浮动 */
             height:0;
             visibility: hidden;
         }
         /* 对div中选中的部分添加红色背景 */
         div::selection{
             background: red;
         }
                  /* 兼容IE6的做法 */
         .clearfix{
             zoom:1 
         }
zoom：设置或检索对象的缩放比例，触发IE浏览器的haslayout属性，解决浮动，margin重叠等一些问题。
zoom是IE浏览器的专用属性，以前火狐以及谷歌等一些其它浏览器是不支持的，也没有通过W3C的标准。不过现在这个属性开始标准化，已经出现在了css3的草案中，也就是CSS3中的transform: scale这个属性来实现。

用法：ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法
.父元素 { overflow: auto; zoom: 1 },

伪元素配合伪类选择器使用
css源码：

         /* 配合伪类选择器使用*/
         section > span:hover::before{
             content: "[";
         }
         section > span:hover::after{
             content:"]"
         }

效果图展示：在这里插入图片描述鼠标移上去后在这里插入图片描述

3 css3新属性

3.1 透明度写法

background-color:rgba(0,0,255,0.3);（第四个位置：0~1，颜色愈来愈深）
background-color:transparent;（默认全透明，可通过浏览器调整）（#00000000~#000000透明至不透明）
opacity:.1;（0~1，颜色愈来愈深）

3.2 圆角属性

圆角属性的语法格式：
border-radius: px | %;
当border-radius的值，大于等于宽度高度一半的时候，会变为正圆。
border-radius:左上 右上 右下 左下
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
  border-radius的值如果是百分比的话，横向的百分比是相对于宽的，纵向的百分比是相对于高的。
  如果border-radius的值写成像素，对于长方形来说，只能做成胶囊圆角。如果想做成椭圆，只能写百分比。当border-radius的值大于等于50%，就成为一个椭圆。

3.3 阴影属性

3.3.1 盒子阴影（box-shadow）

从IE9开始支持盒子阴影。
box-shadow: 右 下 羽化值 延展 背景颜色 (inset);
css样式源码：

    <style>
          html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}
          div{
            width:150px;
            height:150px;
            background:skyblue;
            border: 1px solid black;
            margin:25px;
            float:left;
            /* line-height:150px; */
            text-align: center;
        }
        /* 
        box-shadow: 右 下 羽化值 延展 颜色
         */
        /* 水平方向的阴影 */
        div:first-child{
            -webkit-box-shadow:5px  0;
            -ms-box-shadow:5px  0;
            -moz-box-shadow:5px  0;
            -o-box-shadow:5px  0;
            box-shadow: 5px  0;
        }

        div:nth-child(2){
            box-shadow: 0 5px;
        }

        div:nth-child(3){
            box-shadow: 5px -5px;
        }
        /* 右下有阴影,加模糊程度 */
        div:nth-child(4){
            box-shadow: 5px 5px 20px;
        }
        /* 右下有阴影,加模糊程度,比原本的盒子上下左右大10px */
        div:nth-child(5){
            box-shadow: 5px 5px 10px 10px;
        }
        /* 右下有阴影,加模糊程度,比原本的盒子上下左右大10px 发红光 */
        div:nth-child(6){
           box-shadow: 5px 5px 10px 10px red;
        }
        /* 内发光 */
        div:nth-child(7){
           box-shadow:inset 5px 5px 10px 10px red;
        }
        /* 多个阴影 */
        div:nth-child(8){
            box-shadow:inset 5px 5px 10px 10px red,0 0 20px 10px yellow,10px 10px 20px 10px pink;
        }
    </style>

body部分源码：

    <div>水平方向的阴影</div>
    <div>垂直方向的阴影</div>
    <div>右上方向的阴影</div>
    <div>右下有阴影,加模糊程度</div>
    <div>右下有阴影,加模糊程度,比原本的盒子上下左右大10px</div>
    <div>右下有阴影,加模糊程度,比原本的盒子上下左右大10px 发红光 </div>
    <div>内发光</div>
    <div>多个阴影</div>

效果图：在这里插入图片描述

3.3.2 文本阴影（text-shadow）

文字阴影从IE10开始支持的。
text-shadow: 右 下 羽化值 颜色;
文字阴影没有延展，没有inset，其它和box-shadow一样。
例：
css部分：

h1{color:pink;text-shadow:  5px 5px 10px blue;}

body部分：

<h1>文本阴影效果！</h1>

效果图：在这里插入图片描述

3.4 背景新属性

3.4.1 CSS2中的背景属性

background-color 背景色
background-image 背景图
background-repeat 是否平铺
background-position 背景图定位
background-attachment fixed表示固定背景图。scroll背景图随着屏幕滚动而滚动。

3.4.2 背景起源（backgroun-origin）

背景起源，就是背景是相对于谁进行定位的。
background-origin: padding-box | border-box | content-box;
background-origin的默认取值是padding-box。
padding-box 背景图像相对于边界框进行定位（默认/计算border不算padding）
border-box 背景图像相对于边界框的边进行定位（只以盒子实际边为准/border和padding都不计算）
content-box 背景图像的相对于内容进行定位（计算border和padding）
例：padding-box:在这里插入图片描述border-box:在这里插入图片描述content-box:在这里插入图片描述
background-origin属性指定background-position属性应该是相对位置。
注意如果背景图像background-attachment是"固定/fixed"，这个属性没有任何效果。

3.4.3 背景裁切（backgrou-clip）

background-clip属性指定背景绘制区域。
background-clip: border-box | padding-box | content-box
border-box 默认值。背景绘制在边框方框内（覆盖到边界框/默认）
padding-box 背景绘制在衬距方框内（不覆盖border）
content-box 背景绘制在内容方框内（不覆盖border和padding）
例：border-box:在这里插入图片描述padding-box:在这里插入图片描述content-box:在这里插入图片描述

3.4.4 背景大小（background-size）

background-size属性指定背景图片大小。
background-size:auto auto 默认的情况
background-size:px px 背景图大小将以该大小来呈现
background-size:100% 100% 宽度与盒子等宽，高度与盒子登高
background-size:100% auto 宽度与盒子等宽，高度自动等比缩放
background-size:auto 100% 高度与盒子等高，宽度自动等比缩放
background-size:cover 缩放背景图到刚好覆盖盒子为止（以最小边铺满为准，笔者认为==100%）
background-size:contain 在保证背景图完整显示的情况下，尽可能的缩放背景图到等高或等宽。

3.4.5 背景渐变（linear-gradient）

最好还是写兼容浏览器写法或者用pie插件
background-image:linear-gradient;（线性梯度）
linear-gradient(开始的位置，颜色值1，颜色值2，…)
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
  创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
css部分：

	<style>
		*{
			margin: 0;
			padding: 0
		}

		div {
			width: 150px;
			height: 150px;
			border: 1px solid black;
			margin: 30px;
			float: left;
		}

		.dv1 {
			/*红色出现在起始位置，蓝色出现在终点（从左到右）*/
			/* background-image: -webkit-linear-gradient(left, red, blue); 
			background-image: -ms-linear-gradient(left, red, blue);
			background-image: -moz-linear-gradient(left, red, blue);
			background-image: -o-linear-gradient(left, red, blue);  */
			background-image: linear-gradient(to right, red, blue);
		}

		.dv2 {
			/*红色出现在起始位置，蓝色出现在终点（从上到下）*/
			background-image: linear-gradient(to bottom, red, blue);
		}

		.dv3 {
			/*红色出现在起始位置，蓝色出现在终点（从左上到右下）*/
			background-image: linear-gradient(to bottom right, red, blue);
		}

		.dv4 {
			/*变划分区域红色（0~33.33%）蓝色（33.33%~66.66%）黄色（66.66%~100%）
			（默认根据颜色的个数百分比划分区域/三个颜色各自划分33%，四个颜色划分25%...）*/
			background-image: linear-gradient(to bottom, red, blue, yellow);
		}

		.dv5 {
			/*渐变划分区域红色（0~25%）蓝色（25%~50%）黄色（50%~75%）绿色（75%~100%）*/
			background-image: linear-gradient(to bottom, red, blue, yellow, green);

		}

		.dv6 {
			/*渐变划分区域红色（0~20%）蓝色（20%~50%）黄色（50%~80%）绿色（80%~100%）百分比是出现起点*/
			background-image: linear-gradient(to bottom, red, blue 20%, yellow, green 80%);
		}
		</style>

body部分：

	<div class="dv1">从左到右</div>
	<div class="dv2">从上到下</div>
	<div class="dv3">从左上到右下</div>
	<div class="dv4"></div>
	<div class="dv5"></div>
	<div class="dv6"></div>

效果图展示：在这里插入图片描述

3.4.6 径向渐变（radial-gradient）

Internet Explorer 9 及之前的版本不支持渐变。
background-image: radial-gradient(颜色1, 颜色2, …);
background-image: radial-gradient(shape size at position（位置处的形状大小）, 开始颜色, …, 结束颜色);
radial-gradient() 函数用径向渐变创建 “图像”。
径向渐变由中心点定义。径向渐变 - 颜色结点均匀分布
为了创建径向渐变你必须设置两个颜色。
css部分：

	<style>
		*{
			margin: 0;
			padding: 0
		}

		div {
			width: 200px;
			height: 100px;
			border: 1px solid black;
			margin: 30px;
			color: black;
			float: left;
		}

		.d1 {
			/* background-image:radial-gradient(宽半径 高半径, 起始颜色,颜色2,...,终止颜色); */
			background-image: radial-gradient(100px 50px, green, pink, blue, red, gold, white);
		}

		.d2 {
			background-image: radial-gradient(red, gold, purple);
		}

		.d3 {
			/* background-image:radial-gradient(定义渐变形状, 起始颜色,颜色2,...,终止颜色); */
			background-image: radial-gradient(circle, red, gold, purple);
		}

		.d4 {
			/* background-image:radial-gradient(定义渐变的大小，可能值 at 圆心位置x 圆心位置y, 起始颜色,颜色2,...,终止颜色); */
			background-image: radial-gradient(closest-side at 60% 55%, red, gold, purple);
		}

		.d5 {
			background-image: radial-gradient(farthest-side at 60% 55%, red, gold, purple);
		}

		.d6 {
			background-image: radial-gradient(closest-corner at 60% 55%, red, gold, purple);
		}
	</style>

body部分：

<body>
	<div class="d1">控制半径大小</div>
	<div class="d2">椭圆形 Ellipse（默认）<br>farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角</div>
	<div class="d3">圆形 Circle：指定圆形的径向渐变</div>
	<div class="d4">closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边</div>
	<div class="d5">farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边</div>
	<div class="d6">closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角</div>
</body>

效果图展示：在这里插入图片描述

3.4.7 多背景

从IE9开始，一个盒子可以加多个背景，多个背景是指多个背景图，非多个背景色。
多个背景之间以逗号分隔。
例如：background:背景图1 content-box, 背景图2 padding-box, 背景图3 border-box, …（谁的写前面会覆盖其他的背景图）
content-box是指background-origin和background-clip都为content-box;
padding-box是指background-origin和background-clip都为padding-box;
…

          div{
              width:300px;
              height:300px;
              border:100px dotted red;
              margin:100px auto;
              padding:100px;
              color:white;
              background:url(../images/48/1.png) content-box,url(../images/48/2.png) padding-box,url(../images/48/3.png) border-box;
          }

效果图：在这里插入图片描述
在这里插入图片描述

3.4.8 背景图与插入图片区别
  1. 插入图片语义高，可以被搜索引擎收录到；背景图语义低，不能搜索引擎收录到；
  2. 插入图片站位，背景图不占位；
  3. 背景图非常容易控制，因为有background-position，background-origin，background-size等。插入图片不容易控制。
  4. 背景图可以用精灵图
3.4.9 插入图片会出现的bug

==bug: 插入图片的时候会出现10px的白边 ==
解决办法1
img{
display: block;
}
解决办法2
img{
vertical-align: middle;
}

3.5 让IE678部分支持CSS3

可以通过一个第三方的库PIE_IE678.js让IE678部分支持CSS，例如：圆角、盒子阴影。

星灭233
关注
专栏目录
CSS3的学习总结
lixiaohong2012的博客
04-18 1123
1、强大的选择器 新增的属性选择器、结构伪类选择器、UI元素状态伪类选择器、其他新增选择器2、增强的文本和颜色功能text-shadow 定义文本阴影或模糊效果 text-overflow 定义省略文本的处理方式 word-wrap 定义文本超过指定容器的边界时是否断开转行RGBA RGBA是在RGB的基础上增加一个透明度(A)的设置 opacity 定义颜色的不透
css3学习心得
KSH_Wu的博客
11-05 718
我们知道CSS 用于控制网页的样式和布局，而CSS3 是最新的 CSS 标准。下面回顾一下css3中的新特性。（都是基于w3school网站学习的心得，更纤细的请查阅该网站。点击打开链接）         （1） 首先学习的第一个特性就是对块级元素进行操作：旋转 看下列代码（一定要自己敲一遍，便于记忆） div { border:1px solid bl
CSS3学习心得
12-01
这是本人对CSS3学习的一些心得，如若有误，请批评指正，谢谢！
CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位
weixin_30527323的博客
11-23 254
web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控制的，就不应该使用HTML标签完成，如果CSS能解决的问题尽量不要...
CSS3学习总结
weixin_54257364的博客
07-01 240
1.属性选择器属性选择器的权重跟class选择器的权重一样都是10，但是属性选择器前面一般会加上标签选择器（权重1）所以加起来权重是一般比class选择器权重高属性选择器语法 2结构伪类选择器结构伪类选择器的权重是10，但是父标签的权重是1，子标签的权重是1，加一起权重就是12了父标签中正序第一个出现子标签例子：ul li: first-child父标签中正序最后一个出现子标签例子：ul li: last-child3.伪元素选择器伪元素是用css的方式，模拟创建一个行内元素，但不是真正意义上的元素伪元
CSS3 学习总结
一切从零开始
09-30 331
学习地址：http://www.runoob.com/css3/css3-tutorial.html
详解CSS3中属性选择器新增加的特性
09-24
在这些改进中，属性选择器得到了显著的提升，CSS3为属性选择器引入了新的匹配模式，使得我们可以更加灵活和细致地选择元素。 在CSS2中，属性选择器已经被支持，但其能力相对有限。CSS2的属性选择器支持以下几种模式...
CSS3的选择器.html
03-02
CSS3的选择器.html
让IE可以变相支持CSS3选择器
12-10
- **cssQuery**：由Dean Edwards开发的JavaScript库，全面支持CSS选择器，包括CSS3，提供了独立的CSS1、CSS2、CSS3和全集版本。通过cssQuery，可以在IE中动态添加样式名以模拟CSS3选择器的效果。 示例代码： ```...
css3.0.rar_CSS3_css3.0_html chm
09-23
1. **选择器增强**：CSS3引入了更精确的选择器，如伪类（`:hover`, `:active`, `:focus`等）、伪元素（`::before`, `::after`）以及属性选择器，使得对元素的定位和装饰更为精细。 2. **边框与背景**：CSS3允许创建...
css3学习总结
qq_63339311的博客
11-13 892
css3学习总结css3学习感悟css3相关语法我的代码 css3学习感悟 通过本周对css3的学习，我掌握了更多关于网页构建的方法，并通过实践使得自己的网页构建技术更加成熟。而且我明白了将html,css,css3结合起来对于网页构建是十分重要的。通过三者的结合，可使得网页构建更加完善。 css3相关语法 多列布局columns属性参数主要就两个属性参数：列宽和列数。 参数： 参数说明： 主要用来定义多列中每列的宽度，其基本语法如下所示 ； column-width: auto | 主要用来定义多列
CSS3学习总结一
sh435367384的博客
03-08 258
目录------------一.选择器；二、特殊性（优先级）；三.文本相对长度单位；四.盒子模型；五.利用CSS画图一.选择器；1.ID选择器：以#开始，引用时使用id，如id="div1"2.类选择器：以.开始，使用class属性引用，可以有多个，如class="cls1 cls2 cls3"3.标签选择器：以标签名称开始，如p,span,div,*4.伪类选择，a:hover，a:link，a...
css3学习总结二
weixin_30739595的博客
08-07 86
第二章 气泡对话框 学习word-wrap属性，用来容纳溢出的文本。取值normal（默认）或break-word text-wrap是控制词间如何折行。 使用border-radius实现圆形（椭圆） 要绘制一个正圆，得给盒容器指定相同的width和height值，要用em代替px作为尺寸来确保它可以根据文字量等比扩大。然后，将每个边角的border...
css3新特性
ymumi的博客
03-10 585
CSS3新增属性用法整理：1、box-shadow（阴影效果）2、border-color（为边框设置多种颜色）3、border-image（图片边框）4、text-shadow（文本阴影）5、text-overflow（文本截断）6、word-wrap（自动换行）7、border-radius（圆角边框）8、opacity（透明度）9、box-sizing（控制盒模型的组成模式）10、resiz...
css3新属性学习
baldicoot_的博客
04-28 292
box-size：width 这样就可以让我们不必要再去计算盒子增减内边距后有没有撑开什么的，因为无论内边距如何变化，盒子的大小始终只会等于width。 filter：blur（5px） 照片滤镜，css3为我们增加了滤镜效果，当括号中的数值越大，则图片越模糊。 width:calc（100%-30px） 可以自动计算盒子的宽高，根据外界的变化而动态变化自身大小，可以利用于相应式的效果制作。 cs...
CSS3新增属性总结
kkm486622296的博客
10-31 421
一、选择器 1、属性选择器： p[index]{background:red}                           //只使用属性名，但没有确定任何属性值p[index=1]{background:red}                       //指定属性名，并指定了该属性的属性值p[index~=pre]{background:red}            
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值