css3属性小结

/*border-radius*/
.demo2{
  border:2px solid #a1a1a1;
  padding:10px 40px;
  background:#dddddd;
  width:300px;
  border-radius:25px;
}
/*box-shadow*/
.demo3{
  width:300px;
  height:100px;
  background-color:yellow;
  box-shadow: 10px 10px 5px #888888;
}
/*border-image*/
.demo4{
  -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
  border-image:url(border.png) 30 30 round;
}
.demo5{
  -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
  -o-border-image:url(border.png) 30 30 stretch; /* Opera */
  border-image:url(border.png) 30 30 stretch;
}
/*background-size*/
.demo6{
  background:url(img_flwr.gif);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
/*background-Origin/background-clip  border-box padding-box content-box*/
.demo7{
  background:url(img_flwr.gif);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-origin:content-box;
}
/*多个背景*/
.demo8{
  background-image:url(img_flwr.gif),url(img_tree.gif);
}
/*gradient*/
 /*线性渐变 水平*/
.demo9{
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */
}
  /*线性渐变 左到右*/
.demo10{
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法(必须放在最后) */
}
  /*线性渐变 左上到右下*/
.demo11{
    height: 200px;
    background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 标准的语法(必须放在最后) */
}
  /*线性渐变 角度控制*/
.demo12{
    height: 100px;
    background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(180deg, red, blue); /* 标准的语法(必须放在最后) */
}
  /*线性渐变 多色均匀*/
.demo13{
    height: 200px;
    background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */
}
  /*线性渐变 多色不均匀*/
.demo14{
    height: 200px;
    background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
    background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法(必须放在最后) */
}
  /*线性渐变 透明度的使用*/
.demo15{
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法(必须放在最后) */
}
  /*线性渐变 重复性渐变*/
.demo16{
    height: 200px;
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
    background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法(必须放在最后) */
}
  /*圆径渐变 均匀*/
.demo17{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, green, blue); /* 标准的语法(必须放在最后) */
}
  /*圆径渐变 不均匀*/
.demo18{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法(必须放在最后) */
}
  /*圆径渐变 重复 不均匀*/
.demo19 {
    height: 150px;
    width: 200px;
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
    background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法(必须放在最后) */
}

/*文本阴影*/
.demo20{
  text-shadow: 5px 5px 5px #FF0000;
}
/*防止最后一个单词过长溢出div*/
p.demo21{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
/*字体*/
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
.demo22{
font-family:myFirstFont;
}

/*2D转换 旋转*/
.demo23{
  transform:rotate(30deg);
  -ms-transform:rotate(30deg); /* IE 9 */
  -webkit-transform:rotate(30deg); /* Safari and Chrome */
}
/*2D转换 移动*/
.demo24{
  transform:translate(50px,100px);
  -ms-transform:translate(50px,100px); /* IE 9 */
  -webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
/*2D转换 放大*/
.demo25{
  margin:100px;
  transform:scale(2,4);
  -ms-transform:scale(2,4); /* IE 9 */
  -webkit-transform:scale(2,4); /* Safari and Chrome */
}
/*2D转换 x轴 y轴 变形*/
.demo26{
  transform:skew(30deg,20deg);
  -ms-transform:skew(30deg,20deg); /* IE 9 */
  -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
/*2D转换 变换的一个合成属性 旋转,缩放,移动(平移)和倾斜*/
.demo27{
  transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
  -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

/*3D转换 旋转X*/
.demo28{
  transform:rotateX(120deg);
  -webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
/*3D转换 旋转Y*/
.demo29{
  transform: rotateY(130deg);
  -webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

/*过渡*/
.demo30
{
  width:100px;
  height:100px;
  background:red;
  transition:width 2s;
  -webkit-transition:width 2s; /* Safari */
}
.demo30:hover
{
  width:300px;
}
.demo31{
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

.demo31:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

/*动画*/
.demo32{
  width:100px;
  height:100px;
  background:red;
  animation:bgchange 5s linear 0s infinite alternate;
  -webkit-animation:bgchange 5s linear 0s infinite alternate; /* Safari and Chrome */
}
  @keyframes bgchange
  {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
  }

  @-webkit-keyframes bgchange /* Safari and Chrome */
  {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
  }

/*多列  如下div内的文件将变成3列显示*/
.demo33{
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;

  /*指定列之间的间距*/
  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari and Chrome */
  column-gap:40px;

  /*制定列之间的间隔线*/
  -moz-column-rule:4px outset #ff00ff; /* Firefox */
  -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
  column-rule:4px outset #ff00ff;
}

/*指定div可以被用户调整大小*/
.demo34{
  resize:both;
  overflow:auto;
}
时间: 2024-10-31 20:31:59

css3属性小结的相关文章

常用css3属性

整理下日常用到的一些css3属性 1.颜色rgba()  rgb表示红.绿.蓝三个通道的颜色,整数取值范围0~255 + alpha透明通道:值从0到1 使用rgba的a透明值和opacity的区别是: opacity能把所有子元素都带有透明效果,所以通常会单独用一个定位层来设定opacity透明. rgba中的a只改变当前元素的透明. 2.盒子阴影 box-shadow: x轴偏移量  y轴偏移量  模糊半径  阴影的尺寸  阴影的颜色   inset内部阴影|outset外部阴影 偏移量为正

[一天学一个CSS3属性]之二:box-shadow

今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了. 语法: Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]

H5、CSS3属性的支持性以及flex

一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问题.(待深入研究) 二.距离上一次发布<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>转眼已过去一年,在这一年里,浏览器领域的竞争愈演愈烈.Firefox 成为新的“版本帝”但依然未能摆脱被 Chrome 超越的命运,支持更多标准的 IE10 将随着 Windows 8 在10月底正式发

CSS3属性之一:border-radius

语法: border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 取值: <length>: 由浮点数字和单位标识符组成的长度值.不可为负值. border-top-left-radius:

CSS3属性border-radius绘制多种多样的图形

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

让IE6/IE7/IE8浏览器支持CSS3属性

让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件,.htc文件是个脚本文件,我个人以为与js文件属于同一货色,只是呢,貌似htc是Internet Explorer(IE)的私生子,只有IE才认它.htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控

CSS3属性的兼容 什么是弹性和布局

CSS3新特性,兼容性,兼容方法总结 css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?<length>:用长度值设置对象的圆角半径长度.不允许负值<percentage>:用百分比设置对象的圆角半径长度.不允许负值 实例: bo

理解CSS3属性transition

一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-duration:规定完成过渡效果需要多少秒或毫秒. transition-timing-function:规定速度效果的速度曲线. transition-delay:定义过渡效果何时开始. 1.2 语法 transition: property duration timing-function del

document.documentElement.style判断浏览器是否支持Css3属性

1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAnimation等 2.判断浏览器是否支持制定的css属性 function support(cssName) { var htmlStyle = document.documentElement.style; if (cssName in htmlStyle) return true; return