网站设计的趋势,如何把做的网站发布到网上,国家企业信用信息公示系统官方,各种网站末班这篇文章会记录我们平时常用到的 CSS 片段#xff0c;使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的#xff0c;墙裂建议点赞收藏再看#xff0c;方便日后查找清除浮动浮动给我们的代码带来的麻烦#xff0c;想必不需要多说#xff0c;我们会用很多方式来避免这…这篇文章会记录我们平时常用到的 CSS 片段使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的墙裂建议点赞收藏再看方便日后查找清除浮动浮动给我们的代码带来的麻烦想必不需要多说我们会用很多方式来避免这种麻烦其中我觉得最方便也是兼容性最好的一种是在同级目录下再创建一个// 清除浮动.clearfix:after {content: \00A0;display: block;visibility: hidden;width: 0;height: 0;clear: both;font-size: 0;line-height: 0;overflow: hidden;}.clearfix {zoom: 1;}垂直水平居中在 css 的世界里水平居中比垂直居中来的简单一些经过了多年的演化依然没有好的方式来让元素垂直居中(各种方式各有优缺点但都不能达到兼容性好破坏力小的目标)以下是几种常见的实现方式绝对定位方式且已知宽高position: absolute;top: 50%;left: 50%;margin-top: -3em;margin-left: -7em;width: 14em;height: 6em;绝对定位 未知宽高 translateposition: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);//需要补充浏览器前缀flex 轻松搞定水平垂直居中(未知宽高)display: flex;align-items: center;justify-content: center;文本末尾添加省略号当文本的内容超出容器的宽度的时候我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。宽度固定适合单行显示...overflow: hidden;text-overflow: ellipsis;white-space: nowrap;宽度不固定适合多行以及移动端显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;制造文本的模糊效果当我们希望给文本制造一种模糊效果感觉的时候可以这样做color: transparent;text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);动画实现简洁 loading 效果我们来实现一个非常简洁的 loading 效果.loading:after {display: inline-block;overflow: hidden;vertical-align: bottom;content: \2026;-webkit-animation: ellipsis 2s infinite;}// 动画部分-webkit-keyframes ellipsis {from {width: 2px;}to {width: 15px;}}自定义文本选中样式默认情况下我们在网页上选中文字的时候会给选中的部分一个深蓝色背景颜色(可以自己拿起鼠标试试)如果我们想自己定制被选中的部分的样式呢// 注意只能修改这两个属性 字体颜色 选中背景颜色element::selection {color: green;background-color: pink;}element::-moz-selection {color: green;background-color: pink;}顶角贴纸效果有时候我们会有这样的需求在一个列表展示页面有一些列表项是新添加的、或者热度比较高的就会要求在其上面添加一个贴纸效果的小条就像 hexo 默认博客的 fork me on github 那个效果一样。接下来我们开始一步步完成最左边的这个效果htmlFork me on GitHubcss/* 外层容器几本设置 */.wrap {width: 160px;height: 160px;overflow: hidden;position: relative;background-color: #f3f3f3;}.ribbon {background-color: #a00;overflow: hidden;white-space: nowrap;position: absolute;/* shadom */-webkit-box-shadow: 0 0 10px #888;-moz-box-shadow: 0 0 10px #888;box-shadow: 0 0 10px #888;/* rotate */-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);/* position */left: -50px;top: 40px;}.ribbon a {border: 1px solid #faa;color: #fff;display: block;font: bold 81.25% Helvetica Neue, Helvetica, Arial, sans-serif;margin: 1px 0;padding: 10px 50px;text-align: center;text-decoration: none;/* shadow */text-shadow: 0 0 5px #444;}input 占位符当我们给部分 input 类型的设置 placeholder 属性的时候有的时候需要修改其默认的样式。input::-webkit-input-placeholder {color: green;background-color: #f9f7f7;font-size: 14px;}input::-moz-input-placeholder {color: green;background-color: #f9f7f7;font-size: 14px;}input::-ms-input-placeholder {color: green;background-color: #f9f7f7;font-size: 14px;}移动端可点击元素去处默认边框在移动端浏览器上当你点击一个链接或者通过 Javascript 定义的可点击元素的时候会出现蓝色边框说实话这是很恶心的怎么去掉呢?-webkit-tap-highlight-color: rgba(255, 255, 255, 0);首字下沉要实现类似 word 中首字下沉的效果可以使用以下代码element:first-letter {float: left;color: green;font-size: 30px;}小三角在很多地方我们可以用得上小三角接下来我们画一下四个方向的三角形.triangle {/* 基础样式 */border: solid 10px transparent;}/*下*/.triangle.bottom {border-top-color: green;}/*上*/.triangle.top {border-bottom-color: green;}/*左*/.triangle.top {border-right-color: green;}/*右*/.triangle.top {border-left-color: green;}可以看出画一个小三角非常简单只要两行样式就可以搞定对于方向只要想着画哪个方向则设置反方向的样式属性就可以鼠标手型一般情况下我们希望在以下元素身上添加鼠标手型asubmitinput[typeiamge]input[typebutton]buttonlabelselecta[href],input[typesubmit],input[typeimage],input[typebutton],label[for],select,button {cursor: pointer;}屏蔽 Webkit 移动浏览器中元素高亮效果在访问移动网站时你会发现在选中的元素周围会出现一些灰色的框框使用以下代码屏蔽这种样式-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;移除常用标签的浏览器默认的 margin 和 paddingpre、code、legend、fieldset、blockquote … 等标签不是很常用所以就不一一列举如果项目中使用到可以自己单独写body,p,h1,h2,h3,h4,h5,h6,dl,dd,ul,ol,th,td,button,figure,input,textarea,form {margin: 0;padding: 0;}统一 input、select、textarea 宽度不同浏览器的 input、select、textarea 的盒子模型宽度计算方式不同统一为最常见的 content-boxinput,select,textarea {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}table {/*table 相邻单元格的边框间的距离设置为 0*/border-spacing: 0;/*默认情况下给 tr 设置 border 没有效果如果 table 设置了边框为合并模式「border-collapse: collapse;」就可以了*/border-collapse: collapse;}移除浏览器部分元素的默认边框acronym、fieldset … 等其他标签不是很常用就不会一一列举如果项目中用到可以自己单独写img,input,button,textarea {border: none;-webkit-appearance: none;}input {/*由于 input 默认不继承父元素的居中样式所以设置「text-align: inherit」*/text-align: inherit;}textarea {/*textarea 默认不可以放缩*/resize: none;}取消元素 outline 样式由于以下元素的部分属性没有继承父节点样式所以声明这些元素的这些属性为父元素的属性a,h1,h2,h3,h4,h5,h6,input,select,button,option,textarea,optgroup {font-family: inherit;font-size: inherit;font-weight: inherit;font-style: inherit;line-height: inherit;color: inherit;outline: none;}取消超链接元素的默认文字装饰另外 del、ins 标签的中划线、下划线还是挺好的就不去掉a {text-decoration: none;}ol,ul {/*开发中 UI 设计的列表都是和原生的样式差太多所以直接给取消 olul 默认列表样式*/list-style: none;}button,input[typesubmit],input[typebutton] {/*鼠标经过是「小手」形状表示可点击*/cursor: pointer;}input::-moz-focus-inner {/*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/padding: 0;border: 0;}取消部分浏览器数字输入控件的操作按钮input[typenumber] {-moz-appearance: textfield;}input[typenumber]::-webkit-inner-spin-button,input[typenumber]::-webkit-outer-spin-button {margin: 0;-webkit-appearance: none;}输入控件 placeholder 色设置 #999input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #999;}input:-moz-placeholder,textarea:-moz-placeholder {color: #999;}input::-moz-placeholder,textarea::-moz-placeholder {color: #999;}input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #999;}template {/*由于部分浏览 template 会显示出来所以要隐*/display: none;}position: fixed 的缩写.pf {position: fixed;/*chrome 内核 浏览器 position: fixed 防止抖动*/-webkit-transform: translateZ(0);}利用绝对定位宽高拉升原理中心居中元素.middle {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}利用相对定位于 CSS3 使元素垂直居中.v-middle {position: relative;top: 50%;-webkit-transform: -webkit-translateY(-50%);-moz-transform: -moz-translateY(-50%);-o-transform: -o-translateY(-50%);transform: translateY(-50%);}元素计算宽高的盒子模型以 border 为外界限「bb border-box」.bb {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}单行文本溢出显示省略号「to text-overflow」.to {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}初始化样式不同的浏览器对各个标签默认的样式是不一样的而且有时候我们也不想使用浏览器给出的默认样式我们就可以用 reset.css 去掉其默认样式body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin: 0;padding: 0;}body,button,input,select,textarea {font: 12px/1.5 tahoma, arial, \5b8b\4f53;}h1,h2,h3,h4,h5,h6 {font-size: 100%;}address,cite,dfn,em,var {font-style: normal;}code,kbd,pre,samp {font-family: couriernew, courier, monospace;}small {font-size: 12px;}ul,ol {list-style: none;}a {text-decoration: none;}a:hover {text-decoration: underline;}sup {vertical-align: text-top;}sub {vertical-align: text-bottom;}legend {color: #000;}fieldset,img {border: 0;}button,input,select,textarea {font-size: 100%;}table {border-collapse: collapse;border-spacing: 0;}强制换行/自动换行/强制不换行/* 强制不换行 */div {white-space: nowrap;}/* 自动换行 */div {word-wrap: break-word;word-break: normal;}/* 强制英文单词断行 */div {word-break: break-all;}table 边界的样式table {border: 1px solid #000;padding: 0;border-collapse: collapse;table-layout: fixed;margin-top: 10px;}table td {height: 30px;border: 1px solid #000;background: #fff;font-size: 15px;padding: 3px 3px 3px 8px;color: #000;width: 160px;}绝对定位与 margin当我们提前知道要居中元素的长度和宽度时可以使用这种方式.container {position: relative;width: 300px;height: 200px;border: 1px solid #333333;}.content {background-color: #ccc;width: 160px;height: 100px;position: absolute;top: 50%;left: 50%;margin-left: -80px; /* 宽度的一半 */margin-top: -50px; /* 高度的一半 */}绝对定位与 transform当要居中的元素不定宽和定高时我们可以使用 transform 来让元素进行偏移。.container {position: relative;width: 300px;height: 200px;border: 1px solid #333333;}.content {background-color: #ccc;position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);text-align: center;}line-heightline-height其实是行高我们可以用行高来调整布局不过这个方案有一个比较大的缺点是文案必须是单行的多行的话设置的行高就会有问题。.container {width: 300px;height: 200px;border: 1px solid #333333;}.content {line-height: 200px;}table 布局给容器元素设置display: table当前元素设置display: table-cell.container {width: 300px;height: 200px;border: 1px solid #333333;display: table;}.content {display: table-cell;vertical-align: middle;text-align: center;}flex 布局我们可以给父级元素设置为display: flex利用 flex 中的align-items和justify-content设置垂直方向和水平方向的居中。这种方式也不限制中间元素的宽度和高度。同时flex 布局也能替换line-height方案在某些 Android 机型中文字不居中的问题。.container {width: 300px;height: 200px;border: 1px solid #333333;display: flex;align-items: center;justify-content: center;}.content {background-color: #ccc;text-align: center;}图片上下左右居中一种常用的方式是把外层的 div 设置为 table-cell然后让内部的元素上下左右居中。当然也还有一种方式就是把 img 当做 div参考 6 中的代码进行设置。CSS 代码如下.content {width: 400px;height: 400px;border: 1px solid #ccc;text-align: center;display: table-cell;vertical-align: middle;}html 代码如下 标题两边的小横杠我们经常会遇到这样的 UI 需求就是标题两边有两个小横岗之前是怎么实现的呢比如用个border-top属性然后再把中间的文字进行绝对定位同时给这个文字一个背景颜色把中间的这部分盖住。现在我们可以使用伪元素来实现标题title {color: #e1767c;font-size: 0.3rem;position: relative;:before,:after {content: ;position: absolute;display: block;left: 50%;top: 50%;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);border-top: 0.02rem solid #e1767c;width: 0.4rem;}:before {margin-left: -1.2rem;}:after {margin-left: 1.2rem;}}用 border 属性绘制元素border 除了作为简单的绘制边框以外还可以绘制三角形梯形星形等任意的多边形以下为绘制的两个三角形和梯形.triangle1 {/*锐角三角形*/width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 100px solid #249ff1;border-left: 30px solid transparent;border-right: 100px solid transparent;}.triangle2 {/*直角三角形*/width: 0;height: 0;border-top: 80px solid transparent;border-bottom: 80px solid #ff5b01;border-left: 50px solid #ff5b01;border-right: 50px solid transparent;}.trapezoid {/*梯形*/width: 0;height: 0;border-top: none;border-right: 80px solid transparent;border-bottom: 60px solid #13dbed;border-left: 80px solid #13dbed;}用 border-radius 绘制元素border-radius主要用于绘制圆点、圆形、椭圆、圆角矩形等形状以下为简单绘制的两个图形。.circle,.ellipse {width: 100px;height: 100px;background: #249ff1;border-radius: 50%;}.ellipse {width: 150px;background: #ff9e01;}但border-radius属性实际上可以设置最多 8 个值通过改变 8 个值可以得到许多意想不到的图像用 box-shadow 绘制元素对于box-shadow其完整的声明为box-shadow: h-shadow v-shadow blur spread color inset,各个值表示的意义分别为s 水平方向的偏移垂直方向的便宜模糊的距离(羽化值)阴影的大小(不设置或为 0 时阴影与主体的大小一致)阴影的颜色和是否使用内阴影。实际应用时可以接收 3-6 个值对应分别如下3 个值 h-shadow v-shadow color4 个值 h-shadow v-shadow blur color5 个值 h-shadow v-shadow blur spread color6 个值 h-shadow v-shadow blur spread color inset同时border-shadow接受由多个以上各种值组成的以逗号分隔的值通过这一特性我们可以实现如多重边框的等效果。以下我们用该属性来实现一个单标签且不借助伪元素的添加图标和代表目标的的图标。.plus {width: 30px;height: 30px;margin-left: 50px; /*由于box-shadow不占空间常常需要添加margin来校正位置*/background: #000;box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;}.target {width: 30px;height: 30px;background: red;border-radius: 50%;margin-left: 50px;box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;}使用 CSS 渐变来绘制图标CSS3 的渐变属性十分强大理论上通过渐变可以绘制出任何的图形渐变的特性和使用足足可以写一篇长文以下为一个例子.gradient {position: relative;width: 300px;height: 300px;border-radius: 50%;background-color: silver;background-image: linear-gradient(335deg, #b00 23px, transparent 23px),linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg,#b00 23px,transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px);background-size: 58px 58px;background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;}杯子.cup {display: inline-block;width: 0.9em;height: 0.4em;border: 0.25em solid;border-bottom: 1.1em solid;border-radius: 0 0 0.25em 0.25em;}cup:before {position: absolute;right: -0.6em;top: 0;width: 0.3em;height: 0.8em;border: 0.25em solid;border-left: none;border-radius: 0 0.25em 0.25em 0;content: ;}心形.heart {display: inline-block;margin-top: 1.5em;width: 50px;height: 50px;background: green;}.heart:before,.heart:after {position: absolute;width: 1em;height: 1.6em;background: #000;border-radius: 50% 50% 0 0;content: ;bottom: 0;}.heart:before {-webkit-transform: rotate(45deg);-webkit-transform-origin: 100% 100%;right: 0;background: red;opacity: 0.5;z-index: 5;}.:after {-webkit-transform: rotate(-45deg);-webkit-transform-origin: 0 100%;left: 0;opacity: 0.8;}相机.camera {display: inline-block;border-style: solid;border-width: 0.65em 0.9em;border-radius: 0.1em;}.camera:before {position: absolute;top: -0.3em;left: -0.3em;width: 0.4em;height: 0.4em;border-radius: 50%;border: 0.1em solid #fff;box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;content: ;}.camera:after {position: absolute;top: -0.5em;left: 0.5em;width: 0.2em;border-top: 0.125em solid #fff;content: ;}月亮.moon {display: inline-block;height: 1.5em;width: 1.5em;box-shadow: inset -0.4em 0 0;border-radius: 2em;transform: rotate(20deg);}浮动类常规浮动 list 浮动 image 浮动.float-left {float: left;}.float-right {float: right;}.float-li li,/*定义到li父元素或祖先元素上*/ li.float-li {float: left;}.float-img img,/*定义到img父元素或祖先元素上*/ img.float-li {float: left;}.float-span span,/*定义到span父元素或祖先元素上*/ span.float-span {float: right;}背景图片嵌入与定位.bg-img {background-image: url(../img/bg.png);background-position: center top;background-repeat: no-repeat;}.bg01-img {background-image: url(../img/bg01.png);background-position: center top;background-repeat: no-repeat;}.bg02-img {background-image: url(../img/bg02.png);background-position: center top;background-repeat: no-repeat;}.bg03-img {background-image: url(../img/bg03.png);background-position: center top;background-repeat: no-repeat;}.bg04-img {background-image: url(../img/bg04.png);background-position: center top;background-repeat: no-repeat;}继承类.inherit-width {width: inherit;}.inherit-min-width {min-width: inherit;}.inherit-height {height: inherit;}.inherit-min-height {min-height: inherit;}.inherit-color {color: inherit;}文本缩进.text-indent {text-indent: 2rem;}/*16px*/.text-indent-xs {text-indent: 1.5rem;}/*12px*/.text-indent-sm {text-indent: 1.7rem;}/*14px*/.text-indent-md {text-indent: 2rem;}/*18px*/.text-indent-lg {text-indent: 2.4rem;}/*20px*/行高.line-height-xs {line-height: 1.3rem;}.line-height-sm {line-height: 1.5rem;}.line-height-md {line-height: 1.7rem;}.line-height-lg {line-height: 2rem;}.line-height-25x {line-height: 25px;}.line-height-30x {line-height: 30px;}ul 缩进.ul-indent-xs {margin-left: 0.5rem;}.ul-indent-sm {margin-left: 1rem;}.ul-indent-md {margin-left: 1.5rem;}.ul-indent-lg {margin-left: 2rem;}.ol-list,.ul-list {list-style: disc;}文本截断.truncate {max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hide {display: none;}图片、视频规范.img-max,.video-max {width: 100%;height: auto;}/*display显示方式*/.inline {display: inline;}.inline-block {display: inline-block;}.block {display: block;}边框样式.border-xs-black {border: 1px solid #000;}.border-sm-black {border: 2px solid #000;}.border-md-black {border: 3px solid #000;}.border-lg-black {border: 5px solid #000;}.border-xs-gray {border: 1px solid #9c9c9c;}.border-sm-gray {border: 2px solid #9c9c9c;}.border-md-gray {border: 3px solid #9c9c9c;}.border-lg-gray {border: 5px solid #9c9c9c;}背景颜色.bg-white {background: #fff !important;}.bg-black {background: #1b1c1d !important;}.bg-gray {background: #767676 !important;}.bg-light-gray {background: #f8f7f7 !important;}.bg-yellow {background: #fbbd08 !important;}.bg-orange {background: #f2711c !important;}.bg-red {background: #db2828 !important;}.bg-olive {background: #b5cc18 !important;}.bg-green {background: #21ba45 !important;}.bg-teal {background: #00b5ad !important;}.bg-darkGreen {background: #19a97b !important;}.bg-threeGreen {background: #097c25 !important;}.bg-blue {background: #2185d0 !important;}.bg-violet {background: #6435c9 !important;}.bg-purple {background: #a333c8 !important;}.bg-brown {background: #a5673f !important;}分割线预设hr,.hr-xs-Silver,.hr-sm-black,.hr-sm-Silver,.hr-xs-gray,.hr-sm-gray {margin: 20px 0;}hr {border: none;border-top: 1px solid #000;}.hr-xs-Silver {border: none;border-top: 1px solid #c0c0c0;}.hr-sm-black {border: none;border-top: 2px solid #000;}.hr-sm-Silver {border: none;border-top: 2px solid #c0c0c0;}.hr-xs-gray {border: none;border-top: 1px solid #767676;}.hr-sm-gray {border: none;border-top: 2px solid #767676;}鼠标 a 标签 hover 效果.hover-red a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-red:hover {color: red;} /*单独为a标签添加类名*/.hover-yellow a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-yellow:hover {color: #ffd700;} /*单独为a标签添加类名*/.hover-green a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-green:hover {color: #70aa39;} /*单独为a标签添加类名*/.hover-blue a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-blue:hover {color: blue;} /*单独为a标签添加类名*/.hover-gray a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-gray:hover {color: #9c9c9c;} /*单独为a标签添加类名*/.underline a:hover,a.underline:hover {text-decoration: underline;}阴影效果.shadow-text-xs {text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);} /*智能兼容ie10以上 暂不考虑*/.shadow-xs {-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength1, Direction100, Color#cccccc); /* For IE 8 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength1, Direction100, Color#cccccc); /* For IE 5.5 - 7 */-moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */-webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */}.shadow-sm {-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength2, Direction120, Color#cccccc); /* For IE 8 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength2, Direction120, Color#cccccc); /* For IE 5.5 - 7 */-moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */-webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */}.shadow-md {-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength3, Direction135, Color#cccccc); /* For IE 8 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength3, Direction135, Color#cccccc); /* For IE 5.5 - 7 */-moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */-webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */}.shadow-lg {-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength5, Direction150, Color#cccccc); /* For IE 8 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength5, Direction150, Color#cccccc); /* For IE 5.5 - 7 */-moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */-webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */}圆角.border-radius-xs {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}.border-radius-sm {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.border-radius-md {-webkit-border-radius: 7px;-moz-border-radius: 5px;border-radius: 5px;}.border-radius-lg {-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px;}如果文章和笔记能带您一丝帮助或者启发请不要吝啬你的赞和收藏你的肯定是我前进的最大动力更多大型互联网web前端实战操作在线解析学习指导学习资源点【WEB前端资源】
