控制线显示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

也可将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除宽高以外的部分的颜色等

width: 225px;
height: 225px;
top: 0px;
left: 28px;

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

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

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

required 属性是一个布尔属性。

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

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

<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;
}

css3常用样式集锦的更多相关文章

CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
css3常用样式
.box{ //改变轴的方向 flex-direction:column; //两端对齐 justify-content:space-between; //换行 flex-wrap: wrap; // ...
css3种引入方式,样式与长度颜色,常用样式,css选择器
# CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...
CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
CSS3常用30种选择器总结
CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
CSS3常用属性
CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...
Qt样式表之二：QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...

随机推荐

【中国剩余定理】 poj 1006
生理周期简单模拟对于超出23 * 28 * 33(21252)时进行求余运算即可. #include<stdio.h> int main() { //freopen("in ...
FileSystemXmlApplicationContext方法的绝对路径问题
public AgentServer(Socket c,String confDir) { this.client = c; ApplicationContext ac = new FileSyste ...
js屏蔽浏览器右键菜单
<script type="text/javascript"> function doNothing(){ window.event.returnValue=false ...
POJ 2234 Matches Game 尼姆博弈
题目大意:尼姆博弈,判断是否先手必胜. 题目思路: 尼姆博弈:有n堆各a[]个物品,两个人轮流从某一堆取任意多的物品,规定每次至少取一个,多者不限,最后取光者得胜. 获胜规则:ans=(a[1]^a[ ...
404、500、502等HTTP状态码介绍
基本涵盖了所有问题HTTP 400 – 请求无效HTTP 401.1 – 未授权:登录失败HTTP 401.2 – 未授权:服务器配置问题导致登录失败HTTP 401.3 – ACL 禁止访问资源HT ...
PHP全选择删除功能
<script type="text/javascript" language="javascript"> function selectBox(s ...
/var/lib/mysql/mysql.sock错误的解决办法
问题描述: 使用mysql -uroot -p登录出现找不到 /var/lib/mysql/mysql.sock或者被使用的问题. 可以用如下命令登录:mysql -p --socket=/tmp/m ...
LoadRunner 技巧之协议分析（五）
在做性能测试的时候,协议分析是困扰初学者的难题,选择错误的协议会导致Virtual User Generator 录制不到脚本:或录制的脚本不完整,有些应用可能需要选择多个协议才能完整的记录客户端与 ...
PAT (Advanced Level) 1103. Integer Factorization (30)
暴力搜索. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #i ...
linux 命令实现原理
我们知道有些Linux的命令涉及到一些高效率的算法,在此做出一个积累吧,不是系统的. 1.tail命令打印一个文件的最后num行 2.grep命令从文本中匹配字符串基于正则表达式的匹配很快. it ...

css3常用样式集锦

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

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

css3常用样式集锦的更多相关文章

随机推荐

热门专题