半透明边框 默认情况下,背景会延伸到边框所在的区域下层.可以通过background-clip属性调整该默认行为. border: 10px solid rgba(0,0,0,.2) background: blue; background-clip: padding-box; 多重边框 box-shadow box-shadow支持逗号分隔语法,可以创建任意数量的投影. background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 20…

1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径)来完成一个多重边框的制作,肯定大家都已经非常熟悉box-shadow了,不过我还是来复习一下.(1) box-shadow:none | <shadow>#where<shadow>= [inset? && [ <offset-x><offset-y&…

层叠样式表中最基本的一个方面可能就是层叠——冲突的声明要通过这个层叠过程排序,并由此确定最终的文档表示.这个过程的核心是选择器及其相关声明的特殊性,以及继承机制. 特殊性 对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明.如果一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出. 选择器的特殊性由选择器本身的组件确定.特殊性值表述为4个部分,如:0,0,0,0.一个选择器的具体特殊性如下确定: 对于选择器中给定的各个ID属性值,加0,1,0,0. 对…

CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS margin 属性 margin 属性 接受任何长度单位 可以是像素 英寸 毫米 或者 em margin 可以设置为auto 更常见的做法是为外边距设置长度值 下面的声明在h1元素的各个边上设置了1/4英寸的空白 h1 { margin:0.25in } 下面的例子为h1元素的思辨分别设置了不同的外边…

1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的 CSS 样式,比如,在 style.css 文件中对 p 标签样式的声明如下: <span style="font-family:Microsoft YaHei;font-size:14px;">p {</span> font-size: 12px; b…

1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握的基础 1.2.1 CSS如何控制 使用 xHTML+CSS 布尿页面,其中有个很重要的特点就是结构与表现相分离,结极指 xHTML 页面代码,表现就是 CSS 代码了,如果把一个网页看成穿着衣服癿人癿话,人就是 xHTML,是结构,而衣服呢就是 CSS,是表现,现在出现的问题是,如何让 CSS 去…

通配选择器 可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器 指示文档元素的选择器. /*为body的字体设置为红色*/ body { color: red: } 分组 选择器分组 h1, h2, h3 { color: red; } 声明分组 h1 { font: 18px Helvetica; color: purple; background: aqua; } 结合选择器和声明分组 h1, h2, h3 { font…

如何组织CSS-分层 应用 css 的能力分两部分:一部分是css的API,重点是如何用css控制页面内元素的样式:另一部分是css框架,重点是如何对 css 进行组织.如何组织 css 可以有多种角度,例如按功能划分,或者按区块划分.这里讲一下 base.css + common.css + page.css 的组织方法.将网站内的所有样式,按照职能分成三大类:base.common.page,这三者是层叠结构. 1.base 层-精简通用 位于三者的最底层,提供 css reset 功能和粒…

如果页面样式的背景图片路径设置为'' 或 '#', 会导致页面被重复加载两次 (Chrome.56.0.2924.87 测试) 因为:空图片路径属性值,默认加载当前页面的URL作为图片路径 Safari and Chrome make a request to the actual page itself. Internet Explorer makes a request to the directory in which the page is located.   -- 不确定这个描述的严…

1.背景 2.超链接: 举例:…