1.outline的直角与圆角 来给个div: <div class="use-outline"></div> 来再给个样式: .use-outline{ width: 200px; height: 200px; background: #009dda; margin: 100px 40px; border-radius: 10px; border: 10px solid #c24263; outline: 20px solid #26C2A7; -moz-ou

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box-shadow:0 4px 4px #999; -webkit-box-shadow:0 4px 4px #999; box-shadow:0 4px 4px #999; 使用#设置的颜色是没有透明效果的.这样设置阴影的颜色,如果阴影落在的位置不是白色的,甚至是动态的,例如落在了幻灯片上,好几张不同颜

附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

 CSS圆角发展过程 大致经历了3个阶段,包括: 背景图片实现圆角 CSS2.0+标签模拟圆角 CSS3.0圆角属性(border-radius属性)实现圆角 ☛背景图片实现圆角:==使用背景图片实现圆角的方式很多,实现的方式和圆角的切图方式关系密切 实现方式有多种,主要讲解2种: (一)宽度固定,高度自适应 实现关键点,4个块级标签构成 圆角矩形容器(box)—设置固定宽度,同圆角宽度 顶部圆角(radius-top)—使用背景图片实现顶部圆角 内容( content )—放置主体内容 底部圆

.box{ background:grey; //灰色背景 height:50px; //高500像素 width:200px; //宽200像素 border-top-left-radius:15px; //边框 左上 圆角15像素 4个圆角都是15像素 border-top-right-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; } 也可以这么写 .box{ border-radi

<style type="text/css"> body,p,div {margin:0;padding:0;} .Box {margin:10px auto;width:500px;} /*淘宝的圆角方法*/ .R-1-T,.R-1-B {height:6px;position:relative;background-image:url(http://images.cnblogs.com/cnblogs_com/jikey/round6.png);background-r

直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t2 (func (param i32 i32 i32 i32))) (type $t3 (func)) (import "env" "returnArr" (func $env.returnArr (type $t0))) (func $getArrayOffset (

不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length>?||<color>} 也就是: E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 换句说: 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜

CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color,只剩下最后一个边框图片border-image.今天我们就一起来学习这个border-image的属性.学习完这个border-image以后,大家一定会很兴奋,因为他改变我了们以往设置border的效果,以前我们border只能简单的设置一些纯色或几种简单的线型(如solid,dotted,double,dashed等)那么我们以后就可以通过border-image这个属性改变以

border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角(如图下图第7),把这些角按照不同的顺序和大小来展现,能够绘制成多种多样的图形.以下图例就是通过定义border-radius得到的效果. 把这些基本的图形进行组合,还可以描绘成不同的图案,真的很棒.以下只是简单的几个举例,更多的图形,自己动手画吧.仅border-radius就能实现这么

1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中,直接只需要如下面饿代码,就能做出美轮美奂的圆角效果了~~~ #box1 { border: 1px solid #699; /* for Mozilla Firefox */ -moz-border-radius: 20px; /* for Safari & Google Chrome */ -w

摘要: Internet Explorer,其本身也是足够强大的.IE特有的技术可以很好的实现一些CSS3的效果. 到Internet Explorer 8为止,IE系列是不支持CSS3的.在IE中要做一些常用的效果如圆角.阴影,就需要用一些冗余而无意义的元素和图片来做出这些效果.在厌倦这些后,就想着用更为简洁.直接有效.CSS3式的办法来解决这些问题.好在就算是饱受批评的Internet Explorer,其本身也是足够强大的.IE特有的技术可以很好的实现一些CSS3的效果. Opacity透

1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中,直接只需要如下面饿代码,就能做出美轮美奂的圆角效果了~~~ #box1 { border: 1px solid #699; /* for Mozilla Firefox */ -moz-border-radius: 20px; /* for Safari & Google Chrome */ -w

1.子元素选择两种 h1 strong{color:red}意思是所有后代只要是strong就变成红色 h1>strong{color:red}效果同上但只对第一代后代元素有效 相邻兄弟元素 h1 +strong{color:red} 2. 3.使用background_position属性来提取子png图片 4.越来越觉得css和div的精髓在于层叠. 5.把元素<a>中放置一个图片,于是就做成了一个图片按钮. 6.div居中 margin-left:50%; margin-top:5

来源:http://www.cnblogs.com/damonlan/archive/2012/04/23/2465569.html 作者:浪迹天涯 1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中,直接只需要如下面饿代码,就能做出美轮美奂的圆角效果了~~~ #box1 { border: 1px solid #699; /* for Mozil

随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是这些写法的详细介绍.所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正. 一.圆角(Rounded Corner) .box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 3

an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 属性多浏览器兼容写法快速生成工具,非常方便. 官网地址:http://css3clickchart.com/ CSS3 Generator 比较常用的工具,常见CSS3属性都包含(Border Radius.Box Shadow.Text Shadow.RGBA.@Font Face.Multipl

  1.让老式浏览器支持HTML5   HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5.   第一种方法:使用Google的html5shiv包(推荐) 首先你要引用下面是引用Google的html5.js文件,好处就不说了:    <!--[if IE]> <script src=”http://html5shiv.googlecode.

Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/layout" 只有这两个模块是需要明确 指定引入的@import "compass"默认包含了其他五大模块却不包含resrt,layout 其他四个功能模块和Browser support模块CSS3:跨浏览器的CSS3能力Helpers:内含一系列的函数,跟SASS的函数列表

CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示当前浏览器对所有css3选择器的支持情况     http://tools.CSS3.info/selectors-test/test.html When can I use :这是一个专业的测试网站,为广大网页设计师提供CSS3\HTML5\SVG\JAVAScript api 技术的浏览器支持情

CSS3常用功能的写法 作者: 阮一峰   随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是这些写法的详细介绍.所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正. 一.圆角(Rounded Corner) .box_round { -moz-border-radius: 30px; /* FF1+ */ -w