金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 调试 CSS 的方法

调试 CSS 的方法

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-09 19:48

调试 CSS 的方法

2016/09/06 · CSS · 调试

原来的文章出处: Ben Frain   译文出处:众成翻译 - yanni4night   

本身资历过无数 CSS 代码的调护治疗专门的工作,有旁人写的也会有和睦写的,有运动端平台的也会有正式桌面浏览器的,从陈旧的 IE 到最新的依据 Webkit 的每一日创设。资历告诉自身,比比较多个人并不曾三个标准的 CSS 调节和测验流程。

自家发今后好多气象下,具备专门的职业的减轻难题的不二秘诀,能够节约花在 bug 上的小时。

上边是自己总计的经验。

自己不保障那是最切合的调试 CSS 的艺术,然则的确对笔者很实用。怎么样 CSS 不是你的第一编程语言,调试它恐怕就好像葡萄紫艺术同样;固守上面包车型客车指南能够协理你更管用地定位和消除bug。

回顾地说,小编把调节和测量试验流程分为 3 个等第:

  • 评估并相当慢修复
  • 还原和复发
  • 一定根源并修复

大家种种解释每一种阶段并试行三个例子。

1、:enabled选择器

  1. HTML、XML、XHTML 有啥样分别:

评估并快捷修复

若果 CSS 是您的十分重要办事语言,恐怕你对 CSS 有自然的接头和实行经历的话,消亡 CSS 难题就有为数不菲大致的章程,不然的话,方法就少一些。

有经验的 CSS 开垦者或许都掌握的大器晚成对 CSS 陷阱:

  • 图形附近存在有意思的空白?设置 display: block(图片暗中认可是内联的,因而会有空落落卡塔 尔(阿拉伯语:قطر‎。
  • 要素排列不科学?你也可以有变化的因素。
  • 纯属定位成分不显得、地点不当或然被挡住?你只怕未有设置父成分的 position 属性只怕用 transform 及 opacity 创设二个 z-index 上下文。
  • 伪元素不显得?你可能忘记了设置 ‘content’的值。

如此这般的 “bug” 有一大堆。实际上根本没有bug,越来越多的是开辟者贫乏对浏览器行为的明白。更可信地说,是 CSS 代码让浏览器怎么办。

对这个 CSS 性情熟练的开采者能够飞速稳固到问题还要修复。他们对 bug 的认知与那二个对 CSS 不打听的人会产生疏歧。那样在解决 CSS bug 中对‘专门的职业流’需要的重大的认知就能玉石俱焚。

对此‘神速修复’中从不隐讳的面生难点,在开辟者工具中靠猜来缓解难题的方法已经无妨价值。纵然运气好主题材料被消除了,也很难肯定出难点毕竟是怎么着被解决的。

假定现身的题目无法被轻松消释,先明确难点区域的限定,抓取 HTML 标签(也正是拷贝 DOM卡塔 尔(英语:State of Qatar),步向下三个调解阶段:还原和再次出现。

标准提醒:大大多浏览器的开垦者工具会让你筛选包裹成分并拷贝 HTML 区块。在 Chrome 的开垦者工具中,要会同包裹成分一同拷贝,要求点击 ‘Copy > Copy OuterHTML’。

在Web的表单中,有个别表单成分有可用(“:enabled”卡塔 尔(英语:State of Qatar)和不可用(“:disabled”卡塔 尔(英语:State of Qatar)状态,举例输入框,密码框,复选框等。在暗中同意景况之下,这个表单成分都处于可用状态。那么我们能够经过伪选拔器“:enabled”对这一个表单成分设置样式。

  • HTML,超文本标志语言,是语法较为松散的、不严加的Web语言;
  • XML,可扩大标志语言,首要用于存款和储蓄数据和结构参照他事他说加以调查;
  • XHTML,可扩张超文本标识语言,基于XML,效率与HTML相通,但语法更严苛参照。

回复和复发

本阶段的 CSS bug 修复在接近 Codepen 的拉扯下特别轻巧。我们目标根本是复现出此主题素材 – 也等于挑起 bug 的代码。那能让大家神速稳固 bug,直捣朱雀。

为清晰起见,只把有关的 HTML 和 CSS 提收取来复现难点。你不仅可以够手打 HTML 对应的 CSS,也能够复制真实的代码。假诺恐怕的话,不用把具有 CSS 代码一股脑拷贝过去复出难点,保障最洗练的因素就可以。保持稳步增添 CSS 的习贯,难点就能够本人找到您。

在就要临近真相时,往往只需求二个破例的 CSS 属性的改观就能够让 bug 暴流露来。

相对应的做法是,把持有 CSS 都扔进去复现难点,然后每回移除一点,直到难题应运而生。在推行中,我发觉那略笨,不用也同等看待,你恐怕有例外的见地。

日益地追加或删除 CSS 代码已然是复发难题和一贯故障的定点套路了。

 

  1. 什么样理解 HTML 语义化
    据书上说剧情的结构化(内容语义化卡塔尔,接收适当的标签(代码语义化卡塔 尔(英语:State of Qatar)便于开垦者阅读和写出更文雅的代码的同偶然间让浏览器的爬虫和机械和工具很好地剖判。
  2. 怎么驾驭内容与体制分离的标准化

那么 HTML 标签呢?

设若使用起码 CSS 代码复现难点时,效果就如原始代码相似。那也是卓有效率的,大家明日看 HTML 标签。

率先件事要做的,也是不能跳过的,正是检查标签的有效。即便告知出大家不关切的标题(譬如meta卡塔 尔(英语:State of Qatar),起码能承保它不会以某种方式损坏美感。大家期望能觉察未密封的价签、未有引号的习性,甚至任何任何只怕影响浏览器深入分析的主题材料。建议你使用 W3C validator。

如若标签检查通过,将推动肃清浏览器引进意外样式的或然性。那样做:

先是,把全体因素改成 div(块级成分卡塔尔和 span(行内成分卡塔尔,保证它们只被 CSS 的类接受器选中。也可能有不可缺乏把额外的选拔器移除,如把 a.link 改为 .link

透过动用固定的价签大家扫除了浏览器针对一定成分引进暗中同意样式的恐怕性。表单元素是个特例(马上会在例子中看出卡塔 尔(英语:State of Qatar)。

倘使把全体因素改成 div 和 span,难点扫除了,那么浏览器引进默许样式的存疑就被分明了。以往在 computed styles 面板中检索浏览器扩展了如何样式,想艺术覆盖它。简单的讲就是要看计算后的体裁。

演示演示

1、 前言

在读书html底子的时候,往往须要树立稳定的认知。当中就不乏常被说到或面试司空见惯标题:html语义化的知情以至何为内容与体制分离的原则。在翻看资料的经过中,笔者发觉对那三个难点的敞亮,对于培养卓越的编码习贯和编码思维是丰硕关键的。于是记录于博客,以作记念。
2、 问题
1卡塔尔、如何精通 HTML 语义化
2卡塔 尔(阿拉伯语:قطر‎、如何明白内容与体制分离的条件
3、怎么样精通 HTML 语义化
1卡塔 尔(阿拉伯语:قطر‎ 何为语义化
  语义化的意思便是用正确的价签做准确的政工,HTML语义化是指依据剧情的构造选择妥帖的标签,也正是依照网页内容将代码语义化。
  HTML标签语义化是Web网页规范化的首要黄金时代环,也是正统制订时主要的陈设基准。HTML5中新平添的浩大标签(如:<article>、<nav>、<header>和<footer>等卡塔 尔(阿拉伯语:قطر‎正是依附那样的兼顾原则。
2卡塔 尔(阿拉伯语:قطر‎查证规范
  浏览器会对语义化的标签设计暗许的体裁,所以验证页面是还是不是语义规范的叁个简易方法就是去掉CSS样式后页面是或不是仍是可以够平时阅读。
3)优点
便利寻觅引擎以至爬虫工具等更易于读懂页面代码。因为机器不会关注页面实际渲染的外观,爬虫是依附于标签来规定上下文和各类显要字的权重,只会关心页面内容自身,页面渲染的精粹与否对机械识别毫无支持。
语义化的HTML在未曾CSS的场地下也能表现较好的原委结构与代码结构。HTML标签是页面内容的载体,语义化的标签相对于是对所包涵内容的一个完璧归赵注脚,也使得页面全部布局清晰。
方便团队开采和保安
有利开采者阅读和写出更温婉的代码。使阅读源代码的人对网址更易于将网址分块,便于阅读维护掌握。
4卡塔 尔(英语:State of Qatar)咋办到html语义化
A、代码中使用的价签<div>和<span>是在具备的HTML标签中最未有语义的。所以要完毕标签语义化,首先要尽量少用<div>和<span>那七个标签,在运用那五个标签时尽恐怕能找到更有语义的价签代替。
  网页的开采者应该熟识全部专门的工作的HTML标签的采纳意况,在适宜之处使用合适的价签。
  举个例子,标签Hx连串则表示标题,在网页中展现各层级的标题时接受;ul和ol标签表示列表,在表现各样数据列表只怕菜单时接纳;其余使用率较高的语义标签有:p、em、strong、table、site、blockquote等,以至HTML5新出席的价签:<header><footer><article><section><nav><aside>等。
B、熟识各标签标准的属性,给HTML标签设置须求的质量。
  和标签语义化的着重相通,有个别质量的安装也是HTML语义化首要的环节。在重重行业内部中明确亟待设置的两特本性是alt属性和title属性,这两特性子设置的也是为了抓好HTML的语义。
  在img标签中,alt是一定要设置的习性,因为img是自闭合标签,并未富含能够分解说明图片的附加消息。alt属性的文字表明是当图片在浏览器中未加载时的显得的取代;title属性是可选属性,当标签蕴涵的剧情不足以注脚语义时,能够透过title增添额外的音信, 在浏览器中当鼠标移到成分上时会显示提醒文本。
  还应该有一个注重的习性是<label>标签中的for属性。<label>标签是<input>成分定义的标记。<label>标签的for属性值指代二个表单成分,属性值为此表单元素的id值。for属性的职能不仅仅把<lable>标签上的触及事件指向了for属性指代的表单成分,也从语义上绑定了<lable>和此表单成分。

<form>
<label for="user_name">User Name:</label>
<input type="text" name="user_name" id="user_name" />
</form>

4、怎么着通晓内容与体制抽离的条件
1卡塔尔网页分离

一个网页分为四个部分:Html——结构,css——表现,javascrip——行为。内容也正是html,样式也正是css。所以内容和样式的分手,就是指在网页编码的经过中,要将html和css两大片段抽离。
2卡塔尔如何兑现

剧情与体制抽离的典型化的达成,一个是要凭仗意识,另叁个是正视涉世。
  例如来讲,面前境遇三个分块明显的网页设计图时:

中低级的开辟人士思路及制作方法:div 偶发嵌套;
中等的开荒人士思路及营造方法:去掉多余的 div ,举办简化;
尖端的开荒职员思路及塑造方法:最大化的简化 html 的结构,然后用 css 实行设置,收缩 html 与 css 的相符度。

对的做法是写HTML的时候先不管样式,重视放在HTML的构造和语义化上,让HTML能提现页面结构照旧内容,,然后举办css 样式设置,裁减 HTML 与 CSS 切合度(即情节与体制分离),写JS的时候,尽量不要用JS去平素操作样式,而是经过给成分增多删减class来支配样式变化(即作为分开卡塔尔国。
3卡塔尔国抽离原则的帮助和益处

浏览器加载网页页面速度变快。抽离原则下,超过一半页面代码写在了CSS个中,页面体量体积变得越来越小。
网页改良规划时,功能、省时。依照html标签内ID或class的符号,到CSS里找到呼应的ID或class,能够急速替换钦点地点的样式,不会破坏页面架交涉任何部分的体制。
出色的利用正是网页换肤,使用肖似的 html 结构,区别的 css 样式。
越来越好地被寻觅引擎收音和录音。基于内容与体制抽离的规范,html的语义化就是生死攸关思索的,网页中语义化的价签代码就能够尤其符合搜索引擎。
css样式的分别,它能够依靠分裂的浏览器,达到显示效果的会集。保险网页架构不改变形的前提下,放心在不一样浏览器渲染显示样式。

原则性源头并修复

借使简化 HTML 标签也平昔不找到难点,而且是可安居复现的,那么就该换个浏览器试后生可畏试。是或不是相像的难题应际而生在 Chrome,IE,Safari 和 Firefox 上?假若不是,哪个的显现是不易的?如若唯有一个浏览器是错的,那么就值得去找出一下相应的 bug 跟踪系统了:

  • Chrome bugs
  • Firefox bugs
  • Safari bugs
  • Microsoft bugs

是某浏览器的标题啊?可能是某浏览器的一定版本的问题?难题是否在修补中?有没有不影响此外浏览器的应用方案?实在不行你可以为特定的浏览器编写修复代码吗?

过去自笔者曾详细描述过如何向浏览器提 bug,在 2011 年 Lea Verou 也写过黄金时代份描述提 bug 流程的稿子。

另生机勃勃种景况是大概须要‘无毒的’hack。举例,小编近年遇上的三个情景是在一个块级成分后边的元素必得是纯属定位的技艺展现出来。 left: 100% 独有在 IE 浏览器(移动端是Windows Phone 8,8.1 和 10卡塔尔中不奏效。IE 中在三个要素之间总有二个空子。看起来疑似三个亚像素渲染难题,因而 left: 99.99% 就能够解决难点而不会潜移暗化别的浏览器。那是个 hack 手腕,但大家知道原理(有的浏览器会舍入,别的则不会卡塔 尔(阿拉伯语:قطر‎,注解在 CSS 的笺注中,未有其他有毒。

微软的 Greg Whitworth 告诉自个儿了有关亚像素舍入的更加多细节。WebKit 和 Blink 内核舍入 1/64,Gecko 内核舍入 1/60,Edge 舍入 1/100(感激 Webkit 开采者 ‘smfr’)。

 

参考:https://segmentfault.com/a/1190000005626375#articleHeader4http://www.cnblogs.com/lovefan/p/3855513.htmlhttp://www.imooc.com/video/242
本随笔作品权归饥人谷_huangyh_max和饥人谷全部,转发须表明来源!

测算后样式

开辟者工具中比较简单被忽略的是 computed styles 面板。假设您对 computed styles 不熟稔的话,看名称就能够想到其意义,便是确实使用到成分上的体制。那很要紧,因为您写的体裁不必然会收效。相通,你写的样式亦非所有生效的体制。上面包车型客车事例将解释本人的意趣:

XHTML

<fieldset class="outer"> <div class="inner"> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> </div> </fieldset>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<fieldset class="outer">
    <div class="inner">
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
    </div>
</fieldset>

对应的 CSS 是:

CSS

.outer { max-width: 400px; } .inner { width: 100%; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; white-space: nowrap; } .item { display: inline-block; width: 100px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.outer {
    max-width: 400px;
}
 
.inner {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
 
.item {
    display: inline-block;
    width: 100px;
}

outer 的上涨的幅度会是微微?倘使您以为是 max-width 的 400px,作者会原谅你的。不过或不是我们看看的宽窄,看 Ben Frain 编写的 codepen。

哪些动静?为啥不是 max-width 的值?给你个思路,展开 Computed Styles 面板。

找到难题的源头了啊?

作者来给你解释下。暗中认可地,田野set 成分的宽度会等于其故事情节的大幅。在 Chrome 的Computed Styles 面板中,min-width 的值是八个新的 min-content

min-width 设置多个新值来“修复”它。那几个事例中,min-width: 0 就会让 max-width 依据大家期待的那么进行专门的工作。

那正是开荒者工具的 Computed Styles 面板中来看的值。记住你写的代码不必然是浏览器总计后的。

透过“:enabled”接收器,改善文件输入框的边框为2像素的新民主主义革命边框,并安装它的背景为暗青。

讨论

页面现身非常的开始和结果想必过多还要不尽相近。差别浏览器对正规的落实存在差别是普及存在的意况。相比较于编写一个疯狂的浏览器 bug 目录,消除难题的最有效流程仍然平昔维持条理性。计算来看可行的艺术包涵:

  • 评估 bug,实行高效修复
  • 运用最少的代码重现难题
  • 动用工具和 bug 追踪描述原因
  • 应用更加灵敏的代码修复难点,只怕应用注释过的hack手腕,亦或拷贝别本修复

    1 赞 3 收藏 评论

图片 1

 

HTML代码:

 

<form action="#">

  <div>

    <label for="name">Text Input:</label>

    <input type="text" name="name" id="name" placeholder="可用输入框"  />

  </div>

   <div>

    <label for="name">Text Input:</label>

    <input type="text" name="name" id="name" placeholder="禁止使用输入框"  disabled="disabled" />

  </div>

</form>  

CSS代码:

 

div{

  margin: 20px;

}

input[type="text"]:enabled {

  background: #ccc;

  border: 2px solid red;

}//说白了正是给可用的输入框增多样式

 

2、:disabled选择器

 

“:disabled”接受器适逢其时与“:enabled”选用器相反,用来筛选不可用表单成分。要经常使用“:disabled”选取器,供给在表单成分的HTML中设置“disabled”属性。

 

亲自去做演示

 

因而“:disabled”选择器,给不可用输入框设置显然的体制。

 

HTML代码:

 

<form action="#">

  <div>

    <input type="text" name="name" id="name" placeholder="小编是可用输入框" />

  </div>

  <div>

    <input type="text" name="name" id="name" placeholder="笔者是不可用输入框" disabled />

  </div>

</form>  

 

CSS代码

 

form {

  margin: 50px;

}

div {

  margin-bottom: 20px;

}

input {

  background: #fff;

  padding: 10px;

  border: 1px solid orange;

  border-radius: 3px;

}

input[type="text"]:disabled {

  background: rgba(0,0,0,.15);

  border: 1px solid rgba(0,0,0,.15);

  color: rgba(0,0,0,.15);

}

 

 

3、:checked选择器

在表单成分中,单选开关和复选开关都具备选大壮未入选状态。(大家都知情,要覆写那五个开关默许样式相比困难卡塔尔国。在CSS3中,大家得以经过情景接收器“:checked”同盟别的标签实现自定义样式。而“:checked”表示的是选中状态。

 

示范演示:

 

通过“:checked”状态来自定义复选框效果。

 

HTML代码

 

<form action="#">

  <div class="wrapper">

    <div class="box">

      <input type="checkbox" checked="checked" id="usename" /><span>√</span>

    </div>

    <lable for="usename">作者是选中状态</lable>

  </div>

  

  <div class="wrapper">

    <div class="box">

      <input type="checkbox"  id="usepwd" /><span>√</span>

    </div>

    <label for="usepwd">作者是未入选状态</label>

  </div>

</form> 

CSS代码:

 

form {

  border: 1px solid #ccc;

  padding: 20px;

  width: 300px;

  margin: 30px auto;

}

 

.wrapper {

  margin-bottom: 10px;

}

 

.box {

  display: inline-block;

  width: 20px;

  height: 20px;

  margin-right: 10px;

  position: relative;

  border: 2px solid orange;

  vertical-align: middle;

}

 

.box input {

  opacity: 0;

  position: absolute;

  top:0;

  left:0;

}

 

.box span {

  position: absolute;

  top: -10px;

  right: 3px;

  font-size: 30px;

  font-weight: bold;

  font-family: Arial;

  -webkit-transform: rotate(30deg);

  transform: rotate(30deg);

  color: orange;

}

 

input[type="checkbox"] + span {

  opacity: 0;

}

 

input[type="checkbox"]:checked + span {

  opacity: 1;

}

 

4、::selection选择器

 

“::selection”伪成分是用来合营卓越体现的文书(用鼠标选拔文本时的文本)。浏览器默许情状下,用鼠标采取网页文本是以“浅蓝的背景,藏石榴红的书体”展现的,效果如下图所示:

 

从上图中得以看见,用鼠标选中“静心IT、互连网手艺”、“纯干货、学有所用”、“对的、那是无需付费的”那三行文本中,暗中认可呈现样式为:雪白背景、酸性绿文本。

 

风度翩翩部分时候设计须求,不采纳上海体育场地这种浏览器暗中认可的崛起文本效果,供给叁个特有的效果与利益,那时“::selection”伪成分就可怜的实用。不过在Firefox浏览器还必要丰裕前缀。

 

示范演示:

 

通过“::selection”接纳器,将Web中选中的文书背景产生巴黎绿,文本形成深红。

 

HTML代码:

 

<p>“::selection”伪成分是用来合作优秀展示的公文。浏览器暗中同意情形下,选取网址文件是湛蓝的背景,牡蛎白的书体,</p>

CSS代码:

 

::-moz-selection {

  background: red;

  color: green;

}

::selection {

  background: red;

  color: green;

 

  

 注意:

 

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

 

2、Firefox 辅助代表的 ::-moz-selection。

 

5、“:read-only”伪类选择器

用来钦命处于只读状态元素的体裁。轻松点清楚就是,成分中装置了“readonly=’readonly’”

 

身体力行演示

 

通过“:read-only”选用器来设置地方文本框的样式。

 

HTML代码:

 

<form action="#">

  <div>

    <label for="name">姓名:</label>

    <input type="text" name="name" id="name" placeholder="大漠" />

  </div>

  <div>

    <label for="address">地址:</label>

    <input type="text" name="address" id="address" placeholder="中夏族民共和国北京" readonly="readonly" />

  </div>

</form>  

 

CSS代码:

 

form {

  width: 300px;

  padding: 10px;

  border: 1px solid #ccc;

  margin: 50px auto;

}

form > div {

  margin-bottom: 10px;

}

 

input[type="text"]{

  border: 1px solid orange;

  padding: 5px;

  background: #fff;

  border-radius: 5px;

}

 

input[type="text"]:-moz-read-only{

  border-color: #ccc;

}

input[type="text"]:read-only{

  border-color: #ccc;

}

 

6、:read-write选择器

“:read-write”接受器正巧与“:read-only”接纳器相反,首要用于钦命当成分处于非只读状态时的样式。

 

示范演示

 

利用“:read-write”选用器来设置不是只读控件的文本框样式。

 

HTML代码:

 

<form action="#">

  <div>

    <label for="name">姓名:</label>

    <input type="text" name="name" id="name" placeholder="大漠" />

  </div>

  <div>

    <label for="address">地址:</label>

    <input type="text" name="address" id="address" placeholder="中中原人民共和国香港" readonly="readonly" />

  </div>

</form>  

CSS代码:

 

form {

  width: 300px;

  padding: 10px;

  border: 1px solid #ccc;

  margin: 50px auto;

}

form > div {

  margin-bottom: 10px;

}

 

input[type="text"]{

  border: 1px solid orange;

  padding: 5px;

  background: #fff;

  border-radius: 5px;

}

 

input[type="text"]:-moz-read-only{

  border-color: #ccc;

}

input[type="text"]:read-only{

  border-color: #ccc;

}

 

input[type="text"]:-moz-read-write{

  border-color: #f36;

}

input[type="text"]:read-write{

  border-color: #f36;

}

 

 

7、::before和::after

::before和::after那七个根本用来给元素的前头或后边插入内容,那五个常和"content"合作使用,使用的风貌最多的就是消灭浮动。

 

.clearfix::before,

.clearfix::after {

    content: ".";

    display: block;

    height: 0;

    visibility: hidden;

}

.clearfix:after {clear: both;}

.clearfix {zoom: 1;}

 

理之当然可以运用他们创建出别样越来越好的意义,例如侧边中的阴影效果,也是透过那几个来促成的。

 

重大代码分析:

 

.effect::before, .effect::after{

    content:"";

    position:absolute;

    z-index:-1;

    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);

    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);

    box-shadow:0 0 20px rgba(0,0,0,0.8);

    top:50%;

    bottom:0;

    left:10px;

    right:10px;

    -moz-border-radius:100px / 10px;

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:调试 CSS 的方法

关键词: