css3整理--border-radius】的更多相关文章

最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性border-radius.box-shadow.border-image 边框圆角 border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ 边框阴影 -moz-box-shadow: 10px 10px 5px #888888; /*…
css属性:border-radius :border:边框:radius:弧度:所以这个属性的意思很明了. 下面实现一个小demo: <!doctype html> <html> <head> <title>这里是标题的内容</title> <meta charset="utf-8"/><!--定义浏览器解析的方式--> <style rel="stylesheet" typ…
http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px,左右是20px border-radius:50px 0px 30px; 上50px 左右0px 下30px; 圆和椭圆的区别在于,椭圆的长短半轴不相等 border-radius还可以用斜杠设置第二组值.这时,第一组值表示水平半径,第二组值表示垂直半径.第二组值也可以同时设置1到4个值,应用规则…
box-sizing语法: box-sizing : content-box || border-box || inherit 参数取值: content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+conten…
background-origin语法: background-origin: padding-box || border-box || content-box 参数取值: padding-box(padding):此值为background-origin的默认值,决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片: border-box(border):此值决定background-position起始位置从border的外边缘开…
background-clip语法: background-clip : border-box || padding-box || content-box 参数取值: border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉: padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉: context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉:…
案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient(#ddd,#000) 30 30; border-image: -moz-linear-gradient(#ddd,#000) 30 30; border-image: linear-gradient(#ddd,#000) 30 30; } 案例2 .navbox{ border-right: 1…
只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filter-function> ]* } 取值说明: filter-function:有以下值可选 grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋转 invert反色 opacity透明度 brightness亮度 contrast对比度 blur…
clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用 取值: rect:通过设置四个点来进行裁切,语法下面介绍 auto:默认,和不进行裁切的效果一致 inherit:继承父元素的裁切属性 clip: rect(<top>, <right>, <bottom>, <left>); 通过设置距离上…
::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Firefox*/ ::-moz-selection { background: 颜色值: color:颜色值: } /*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值: color:颜色值: } 注意:::selection只能设置backg…