css3常用样式集锦

 

控制线显示0.5px

.line:after{
content:"";
display:block;
position:absolute;
width:200%;
left:0;
right:0;
top:0;
z-index:99;
border-bottom:1px solid #eee;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:scale(0.5, 0.5);
transform:scale(0.5, 0.5);
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

 

 

//换行的样式

 

.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/

 

1. word-break:break-all;只对英文起作用，以字母作为换行依据

 

2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据

 

3.{white-space:pre-wrap; 只对中文起作用，强制换行

 

4.{white-space:nowrap; 强制不换行，都起作用

 

5.{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现

 

注意，一定要指定容器的宽度，不然的话是没有用的。

 

注意word-break 是IE5+专有属性

 

语法：

 

word-break : normal | break-all | keep-all

 

参数：

 

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

 

break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

 

keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

 

 强制不换行
div{
white-space:nowrap;
}
word-break: break-all;  //强制英文不换行，对字母起作用
自动换行
div{
word-wrap: break-word;
word-break: normal;
}

强制英文单词断行

div{
word-break:break-all;
}

CSS设置不转行:

overflow:hidden 隐藏
white-space：normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象

设置强行换行
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

分栏效果
 column
column-count：number； 设置内容分为多少栏显示
column-width：长度单位；设置每一栏的宽度而不设定元素的宽度
column-gap:长度单位;设置多栏之间的间隔距离
column-rule:宽度，颜色;在栏与栏之间增加一条间隔线。类似border.
column-span:all/none;设置是否跨栏显示
 
mask 的属性：图片遮罩注意透明的部分是要显示图片的，比如想显示异形图片的时候可以用图片遮罩属性

 

-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/

 

-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat

 

-webkit-mask-position:x y;

 

-webkit-mask-clip:border | padding | content

 

-webkit-mask-origin:border | padding | content
<style type="text/css">
img{-webkit-mask-image:url('2.png');}
</style>
<body>
<img src="1.jpg"/>
</body>
 
也可将css部分更改为渐变的蒙版样式

img{
-webkit-mask-image:-webkit-radial-gradient(50% 50%,rgba(0,0,0,0),rgba(0,0,0,1));
}

 
可以更改蒙版的起始位置（在上面的代码中添加如下代码）

-webkit-mask-position:70px 70px;

 

 

//outline样式

它可以比如div宽高都是50,div本身是块如果设置outline可以设置让div除宽高以外的部分的颜色等

  1.  width: 225px;
  2.  height: 225px;
  3.  top: 0px;
  4.  left: 28px;
  1. position: absolute;
  2. top: 0;
  3.  left: 0;
  4.  border: 1px solid black;
  5.  cursor: move;
  6.  outline: rgba(0, 0, 0, 0.6) solid 10000px;  //这样设置完div宽高以外的部分就是半透明的黑色的了，可以用在类似于剪切图片的时候

 

css3表单元素里新增的判断表单内容是否合法的属性valid

可以利用它做一个像当在input标签中输入内容时input右侧显示带关闭的小图标,可以再加一个required属性(它可以)

required 属性是一个布尔属性。

required 属性规定必需在提交表单之前填写输入字段。

<style>
input:valid
{
background-color: yellow;
}
</style>
</head>
<body>

<h3> :valid 选择器实例演示。</h3>

<input type="email" value="support@exampel.com" />

<p>请输入非法 e-mail 地址，查看样式变化。</p>

keyframes如何让动画效果停留到运动的最后效果

animation-fill-mode:forwards
for(var i = 0;i<progressObj.length;i++){
    progressObj[i].style.animation = "move 0.5s";
    progressObj[i].style.WebkitAnimation = "move 0.5s";
    progressObj[i].style.animationFillMode = "forwards"; //此属性可以让效果停留到运动的最后效果
    progressObj[i].style.WebkitAnimationFillMode = "forwards"; //此属性可以让效果停留到运动的最后效果
};
@keyframes move {
    0% {
        width:0%;
    }
    100% {
        width:50%;
    }
}*注意如果把100%改成百分之100以内的百分数的化是不可以的，所以它一定是最后的效果才能保留住

 

//控制几行出省略号的样式，line-clamp里设置几就是几行才出省略号，前提要给宽度

.ellipsis{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}

 

css3 box-sizing属性

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

 

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

 

6种炫酷的CSS3按钮边框动画特效  http://www.w2bc.com/demo/201509/2015-09-23-six-button-border-animate/index.html

 

 

transition的用法
.draw:hover::before {
  border-top-color: #60daaa;
  border-right-color: #60daaa;
  -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
          transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #60daaa;
  border-left-color: #60daaa;
  -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
          transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
 transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;(0.1s和0.2s应该是延迟)
transition里width,height,border-color等设置的位置不一样决定了它的运动形式(具体可以参看6种炫酷效果),after和before一个控制左边和下边，一个控制上边和右边

控制字母的大小写的样式

p.uppercase {text-transform:uppercase;}字母全大写
p.lowercase {text-transform:lowercase;}全小写
p.capitalize {text-transform:capitalize;}首字母大写



给border设置透明色
 border: 2px solid transparent;

画三角箭头的方法(将一个div设置成三角箭头，这是向下的箭头，原理分析其实一个正方形是由向下的三角，向上的三角，向左的三角，向右的三角构成的，所以将左三角和右三角背景色设为透明时只设置向下的三角有颜色它就是向下的三角了)
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;


纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

http://www.jb51.net/css/41448.html

1、正方形

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#square { 
width: 100px; 
height: 100px; 
background: red; 
} 

2、长方形

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#rectangle { 
width: 200px; 
height: 100px; 
background: red; 
} 

3、圆形

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#circle { 
width: 100px; 
height: 100px; 
background: red; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px; 
} 

4、椭圆

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#oval { 
width: 200px; 
height: 100px; 
background: red; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px; 
} 

5、上三角

 

最终效果：

 

 

 

 

CSS代码如下：


复制代码
代码如下:

#triangle-up { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
} 

6、下三角

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#triangle-down { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
} 

7、左三角

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#triangle-left { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-right: 100px solid red; 
border-bottom: 50px solid transparent; 
} 

8、右三角

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#triangle-right { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-left: 100px solid red; 
border-bottom: 50px solid transparent; 
} 

9、左上三角

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#triangle-topleft { 
width: 0; 
height: 0; 
border-top: 100px solid red; 
border-right: 100px solid transparent; 
} 

10、右上三角

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#triangle-topright { 
width: 0; 
height: 0; 
border-top: 100px solid red; 
border-left: 100px solid transparent; 
} 

11、左下三角

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#triangle-bottomleft { 
width: 0; 
height: 0; 
border-bottom: 100px solid red; 
border-right: 100px solid transparent; 
} 

12、右下三角

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#triangle-bottomright { 
width: 0; 
height: 0; 
border-bottom: 100px solid red; 
border-left: 100px solid transparent; 
} 

13、平行四边形

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#parallelogram { 
width: 150px; 
height: 100px; 
margin-left:20px; 
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg); 
background: red; 
} 

14、梯形

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#trapezoid { 
border-bottom: 100px solid red; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 0; 
width: 100px; 
} 

15、六角星

 

最终效果： 

 

 

 CSS代码如下：


复制代码
代码如下:

#star-six { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
position: relative; 
} 
#star-six:after { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
position: absolute; 
content: ""; 
top: 30px; 
left: -50px; 
} 

16、五角星

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#star-five { 
margin: 50px 0; 
position: relative; 
display: block; 
color: red; 
width: 0px; 
height: 0px; 
border-right: 100px solid transparent; 
border-bottom: 70px solid red; 
border-left: 100px solid transparent; 
-moz-transform: rotate(35deg); 
-webkit-transform: rotate(35deg); 
-ms-transform: rotate(35deg); 
-o-transform: rotate(35deg); 
} 
#star-five:before { 
border-bottom: 80px solid red; 
border-left: 30px solid transparent; 
border-right: 30px solid transparent; 
position: absolute; 
height: 0; 
width: 0; 
top: -45px; 
left: -65px; 
display: block; 
content: ''; 
-webkit-transform: rotate(-35deg); 
-moz-transform: rotate(-35deg); 
-ms-transform: rotate(-35deg); 
-o-transform: rotate(-35deg); 
} 
#star-five:after { 
position: absolute; 
display: block; 
color: red; 
top: 3px; 
left: -105px; 
width: 0px; 
height: 0px; 
border-right: 100px solid transparent; 
border-bottom: 70px solid red; 
border-left: 100px solid transparent; 
-webkit-transform: rotate(-70deg); 
-moz-transform: rotate(-70deg); 
-ms-transform: rotate(-70deg); 
-o-transform: rotate(-70deg); 
content: ''; 
} 

17、五角大楼

 

最终效果：

 

 

 CSS代码如下：


复制代码
代码如下:

#pentagon { 
position: relative; 
width: 54px; 
border-width: 50px 18px 0; 
border-style: solid; 
border-color: red transparent; 
} 
#pentagon:before { 
content: ""; 
position: absolute; 
height: 0; 
width: 0; 
top: -85px; 
left: -18px; 
border-width: 0 45px 35px; 
border-style: solid; 
border-color: transparent transparent red; 
} 

18、六边形

 

最终效果：

 

 

 CSS代码如下：


复制代码
代码如下:

#hexagon { 
width: 100px; 
height: 55px; 
background: red; 
position: relative; 
} 
#hexagon:before { 
content: ""; 
position: absolute; 
top: -25px; 
left: 0; 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 25px solid red; 
} 
#hexagon:after { 
content: ""; 
position: absolute; 
bottom: -25px; 
left: 0; 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 25px solid red; 
} 

19、八角形

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#octagon { 
width: 100px; 
height: 100px; 
background: red; 
position: relative; 
} 
#octagon:before { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
border-bottom: 29px solid red; 
border-left: 29px solid #eee; 
border-right: 29px solid #eee; 
width: 42px; 
height: 0; 
} 
#octagon:after { 
content: ""; 
position: absolute; 
bottom: 0; 
left: 0; 
border-top: 29px solid red; 
border-left: 29px solid #eee; 
border-right: 29px solid #eee; 
width: 42px; 
height: 0; 
} 

20、爱心

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#heart { 
position: relative; 
width: 100px; 
height: 90px; 
} 
#heart:before, 
#heart:after { 
position: absolute; 
content: ""; 
left: 50px; 
top: 0; 
width: 50px; 
height: 80px; 
background: red; 
-moz-border-radius: 50px 50px 0 0; 
border-radius: 50px 50px 0 0; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 
-webkit-transform-origin: 0 100%; 
-moz-transform-origin: 0 100%; 
-ms-transform-origin: 0 100%; 
-o-transform-origin: 0 100%; 
transform-origin: 0 100%; 
} 
#heart:after { 
left: 0; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
-webkit-transform-origin: 100% 100%; 
-moz-transform-origin: 100% 100%; 
-ms-transform-origin: 100% 100%; 
-o-transform-origin: 100% 100%; 
transform-origin :100% 100%; 
} 

21、无穷大符号

 

最终效果：

 

 

 

 

CSS代码如下：


复制代码
代码如下:

#infinity { 
position: relative; 
width: 212px; 
height: 100px; 
} 
#infinity:before, 
#infinity:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
width: 60px; 
height: 60px; 
border: 20px solid red; 
-moz-border-radius: 50px 50px 0 50px; 
border-radius: 50px 50px 0 50px; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 
} 
#infinity:after { 
left: auto; 
right: 0; 
-moz-border-radius: 50px 50px 50px 0; 
border-radius: 50px 50px 50px 0; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
} 

22、鸡蛋

 

最终效果 

 

 CSS代码如下：


复制代码
代码如下:

#egg { 
display:block; 
width: 126px; 
height: 180px; 
 
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
} 

23、食逗人（Pac-Man）

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#pacman { 
width: 0px; 
height: 0px; 
border-right: 60px solid transparent; 
border-top: 60px solid red; 
border-left: 60px solid red; 
border-bottom: 60px solid red; 
border-top-left-radius: 60px; 
border-top-right-radius: 60px; 
border-bottom-left-radius: 60px; 
border-bottom-right-radius: 60px; 
} 

24、提示对话框

 

最终效果：

 

 

 

 

CSS代码如下：


复制代码
代码如下:

#talkbubble { 
width: 120px; 
height: 80px; 
background: red; 
position: relative; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 
#talkbubble:before { 
content:""; 
position: absolute; 
right: 100%; 
top: 26px; 
width: 0; 
height: 0; 
border-top: 13px solid transparent; 
border-right: 26px solid red; 
border-bottom: 13px solid transparent; 
} 

25、12角星

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#burst-12 { 
background: red; 
width: 80px; 
height: 80px; 
position: relative; 
text-align: center; 
} 
#burst-12:before, #burst-12:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 80px; 
width: 80px; 
background: red; 
} 
#burst-12:before { 
-webkit-transform: rotate(30deg); 
-moz-transform: rotate(30deg); 
-ms-transform: rotate(30deg); 
-o-transform: rotate(30deg); 
transform: rotate(30deg); 
} 
#burst-12:after { 
-webkit-transform: rotate(60deg); 
-moz-transform: rotate(60deg); 
-ms-transform: rotate(60deg); 
-o-transform: rotate(60deg); 
transform: rotate(60deg); 
} 

26、8角星

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#burst-8 { 
background: red; 
width: 80px; 
height: 80px; 
position: relative; 
text-align: center; 
-webkit-transform: rotate(20deg); 
-moz-transform: rotate(20deg); 
-ms-transform: rotate(20deg); 
-o-transform: rotate(20eg); 
transform: rotate(20deg); 
} 
#burst-8:before { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 80px; 
width: 80px; 
background: red; 
-webkit-transform: rotate(135deg); 
-moz-transform: rotate(135deg); 
-ms-transform: rotate(135deg); 
-o-transform: rotate(135deg); 
transform: rotate(135deg); 
} 

27、钻石

 

最终效果： 

 

 CSS代码如下：


复制代码
代码如下:

#cut-diamond { 
border-style: solid; 
border-color: transparent transparent red transparent; 
border-width: 0 25px 25px 25px; 
height: 0; 
width: 50px; 
position: relative; 
margin: 20px 0 50px 0; 
} 
#cut-diamond:after { 
content: ""; 
position: absolute; 
top: 25px; 
left: -25px; 
width: 0; 
height: 0; 
border-style: solid; 
border-color: red transparent transparent transparent; 
border-width: 70px 50px 0 50px; 
} 

28、阴阳八卦（霸气的这个）

 

 

 

 

 

CSS代码如下：


复制代码
代码如下:

#yin-yang { 
width: 96px; 
height: 48px; 
background: #eee; 
border-color: red; 
border-style: solid; 
border-width: 2px 2px 50px 2px; 
border-radius: 100%; 
position: relative; 
} 
#yin-yang:before { 
content: ""; 
position: absolute; 
top: 50%; 
left: 0; 
background: #eee; 
border: 18px solid red; 
border-radius: 100%; 
width: 12px; 
height: 12px; 
} 
#yin-yang:after { 
content: ""; 
position: absolute; 
top: 50%; 
left: 50%; 
background: red; 
border: 18px solid #eee; 
border-radius:100%; 
width: 12px; 
height: 12px; 
} 


 

 

posted @ 2016-06-21 11:32  小小公举  阅读(562)  评论(0)  编辑  收藏  举报