css3
方法三
这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。php
<divid="floater"><divid="content">Content here</div></div>
#floater{ float: left; height:50%; margin-bottom: -120px; } #content{ clear: both; height:240px; position: relative; }
优势：
适用于全部浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现css
缺点：
惟一我能想到的就是须要额外的空元素了(也没那么糟，又是另一个话题)html
---------------------------------html5
-webkit-line-clamp下多行文字溢出点点点...显示实例页面
width:400px;
display: -webkit-box;
-webkit-line-clamp: 3;-webkit-box-orient: vertical;
overflow: hidden;
------------------------------------------------------------------------------------android
css3 旋转 transform:rotate( 5deg)css3
一.过渡属性web
1.transition：简写属性，用于在一个属性中设置四个过渡属性。浏览器
transition: property duration timing- function delay;微信
浏览器支撑状况：app
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
2.transition-property：规定应用过渡的 CSS 属性的名称。
2.transition-duration：定义过渡效果花费的时间。
3.transition-timing-function：规定过渡效果的时间曲线。
4.transition-delay：规定过渡效果什么时候开始。
浏览器支撑状况：
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 属性。
Safari 支持替代的 -webkit-transition-property 属性。
二. 动画属性
1.@keyframes：规定动画。
以百分比来规定改变发生的时间，或者经过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
语法格式：
@keyframes animation-name {
keyframes-selector { css-styles; }
}
浏览器支撑状况：
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的@-webkit-keyframes 规则。
2.animation：全部动画属性的简写属性，除了 animation-play-state 属性。
语法：animation: name duration timing-function delay iteration-count direction;
3.animation-name：规定 @keyframes 动画的名称。
4.animation-duration：规定动画完成一个周期所花费的秒或毫秒。
5.animation-timing-function：规定动画的速度曲线。
6.animation-delay：规定动画什么时候开始。
7.animation-iteration-count：规定动画被播放的次数。n / infinite
8.animation-direction：规定动画是否在下一周期逆向地播放。normal / alternate
9.animation-play-state：规定动画是否正在运行或暂停。
paused
running
----------------------------------------------------------
三.转换属性
1.transform：向元素应用 2D 或 3D 转换。
浏览器支撑状况：
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
-----------------------------------------------------------------------------------------------------------
伪类 :nth-of-type 奇数偶数 odd even
#cooperation{ width: 94%; height: auto;font-size:0;}
#cooperation .co-brands{ width: 48%;display:inline-block; vertical-align:top;font-size:12px}
.space {
font-size: 0;
-webkit-text-size-adjust:none;
}
-webkit-text-size-adjust:none;//Chrome, 其默认有最小字体大小限制，由于，考虑到兼容性
<input type="text" name="user" placeholder="收货人姓名"/><br/>设置属性样式 []
.add-form>input[value]{ color:#eee;} -------------------------------------------------------------
.shine_red {
-webkit-animation-name: shineRed;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes shineRed {渐变色
from {
-webkit-box-shadow: 0 0 5px #bbb;
}
50% {
-webkit-box-shadow: 0 0 10px red;
}
to {
-webkit-box-shadow: 0 0 5px #bbb;
}
}
linear-gradient( )
#bg {
width: 100%;
background: -webkit-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Firefox 3.6 - 15 */
background: linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* 标准的语法 */
}
blockquote:before {
content
:
open-quote
;
}
blockquote:after {
content
:
close-quote
;
}
blockquote:before {
content: " ";
font-size
:
24pt
;
text-align
:
center
;
line-height
:
42px
;
color
:
#fff
;
float
:
left
;
position
:
relative
;
top
:
30px
;
border-radius:
25px
;
background: url(images/quotationmark.png) -3px-3px#d
dd
;
display
:
block
;
height
:
25px
;
width
:
25px
;
}
结合伪类
尽管有不一样类型的伪X（伪元素、伪类），咱们可使用伪类连同伪元素一块儿放入一个CSS规则中，例如，若是咱们但愿当咱们的鼠标移到blockqoute上时，引号的背景色可以略微变深。
blockquote
:hove
r
:after
, blockquote:hover:before {
background-color
:
#555
;
}
添加过渡效果
在伪元素上应用transition属性:before 和
:after 。它们两个都是绝对定位，并且使用负z-index来放置到图片后方实现阴影效果
这是一个很是聪明的实现，利用伪元素结合CSS3 box-shadow 来绘制一个使人吃惊的3D按钮，仅仅使用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左侧添加数字“1”。
使用伪元素来仅仅依靠一个图片标签建立一个“凌乱的”叠加图像效果也是可能的。伪元素用于创建一个图片叠加的错觉，经过使用z-index负值使“叠加”的图片在真正的图片后面来实现。
- list-style: none;
- display: list-item;
- text-align: -webkit-match-parent;
- list-style: none;
- display: block;
- list-style-type: disc;
- -webkit-margin-before: 1em;
- -webkit-margin-after: 1em;
- -webkit-margin-start: 0px;
- -webkit-margin-end: 0px;
- -webkit-padding-start: 40px;
- -webkit-font-smoothing: antialiased;
- font: normal 12px/1.5 "Microsoft YaHei", Helvetica, Arial, sans-serif;
- color:
#232525;
- vertical-align: bottom;
-----------------------------------------------------------------------------------------------
CSS隱藏多余文字為...
text-overflow : clip | ellipsis
参数：clip : 简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）
说明： 请您注意，text-overflow:ellipsis属性在FF中是没有效果的。
white-space:nowrap;
overflow:hidden;
text-overflow : ellipsis ;
overflow: hidden;
white-space: nowrap;
text-overflow: clip|ellipsis|string;
-----------------------------
<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后，全屏显示 <meta name="apple-mobile-web-app-capable" content="yes" />
这meta的做用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当咱们须要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />
默认值为default（白色），能够定为black（黑色）和black-translucent（灰色半透明）。
注意： 若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
说明： 这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸能够设定为57*57（px）或者Retina能够定为114*114（px），ipad尺寸为72*72（px）
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /> //将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时，在手机HOME界面建立应用程序样式的图标。
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
------------------------------------------------------------
去掉iPhone、iPad的默认按钮样式
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea { -webkit-appearance: none;}
若是还有圆角的问题，
.button{ border-radius: 0; }
-------------------------------------------------
::-webkit-input-placeholder { /* WebKit browsers */
color: #a4a4a4;
font-size: 14px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #a4a4a4;
font-size: 14px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #a4a4a4;
font-size: 14px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #a4a4a4;
font-size: 14px;
}
能够在冒号前面写input和textarea
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#666;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color:#666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:#666;
}
知识点：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
css伪类：CSS 伪类用于向某些选择器添加特殊的效果。
css伪元素：CSS 伪元素用于向某些选择器设置特殊效果。
伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。可是伪类兼容现存样式，浏览器须要同时支持旧的伪类，如:first-line,:first-letter,:before,:after等等。所以对于css2以前已经有的伪元素两种写法的做用是同样的，可是为了兼容IE浏览器仍是使用单冒号的写法；
----------------------------------------------------------------
请问这样的页面，当中的全透明，边上半透明，布局有什么思路吗。。。
西安-NS<964089199> 9:49:40
box-shadow就能够
.cover::before {
content: '';
width: 100%; height:100%;
border-radius: 50%;
border: 400px solid #000;
position: absolute;
left: -400px; top: -400px;
/* 本身瞎填的参数，示意 */ box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
}
<div class="cover"></div>
JS代码辅助
固然，个人实现也离不开JS的辅助，JS的工做很简单，让蒙层的width/height以及border大小和须要引导的元素相关联。
我特地整了个能够公用的方法coverGuide（命名不喜欢本身随便改）：
var coverGuide = function(cover, target) {
var body = document.body, doc = document.documentElement;
if (cover && target) {
// target size(width/height)
var targetWidth = target.clientWidth,
targetHeight = target.clientHeight;
// page size
var pageHeight = doc.scrollHeight,
pageWidth = doc.scrollWidth;
// offset of target
var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),
offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft);
// set size and border-width
cover.style.width = targetWidth + 'px';
cover.style.height = targetHeight + 'px';
cover.style.borderWidth =
offsetTop + 'px ' +
(pageWidth - targetWidth - offsetLeft) + 'px ' +
(pageHeight - targetHeight - offsetTop) + 'px ' +
offsetLeft + 'px';
cover.style.display = 'block';
// resize
if (!cover.isResizeBind) {
if (window.addEventListener) {
window.addEventListener('resize', function() {
coverGuide(cover, target);
});
cover.isResizeBind = true;
} else if (window.attachEvent) {
window.attachEvent('onresize', function() {
coverGuide(cover, target);
});
cover.isResizeBind = true;
// IE7, IE8 box-shadow hack
cover.innerHTML = '<img src="guide-shadow.png">';
}
}
}
};
-------------------------------------------------------------------------
css生成三角形
Triangle Up
|
1
2
3
4
5
6
7
|
#triangle-up {
width
:
0
;
height
:
0
;
border-left
:
50px
solid
transparent
;
border-right
:
50px
solid
transparent
;
border-bottom
:
100px
solid
red
;
}
|
Triangle Down
|
1
2
3
4
5
6
7
|
#triangle-down {
width
:
0
;
height
:
0
;
border-left
:
50px
solid
transparent
;
border-right
:
50px
solid
transparent
;
border-top
:
100px
solid
red
;
}
|
Triangle Left
|
1
2
3
4
5
6
7
|
#triangle-
left
{
width
:
0
;
height
:
0
;
border-top
:
50px
solid
transparent
;
border-right
:
100px
solid
red
;
border-bottom
:
50px
solid
transparent
;
}
|
Triangle Right
|
1
2
3
4
5
6
7
|
#triangle-
right
{
width
:
0
;
height
:
0
;
border-top
:
50px
solid
transparent
;
border-left
:
100px
solid
red
;
border-bottom
:
50px
solid
transparent
;
}
|
Triangle Top Left
|
1
2
3
4
5
6
|
#triangle-topleft {
width
:
0
;
height
:
0
;
border-top
:
100px
solid
red
;
border-right
:
100px
solid
transparent
;
}
|
Triangle Top Right
|
1
2
3
4
5
6
7
|
#triangle-topright {
width
:
0
;
height
:
0
;
border-top
:
100px
solid
red
;
border-left
:
100px
solid
transparent
;
}
|
Triangle Bottom Left
|
1
2
3
4
5
6
|
#triangle-bottomleft {
width
:
0
;
height
:
0
;
border-bottom
:
100px
solid
red
;
border-right
:
100px
solid
transparent
;
}
|
Triangle Bottom Right
|
1
2
3
4
5
6
|
#triangle-bottomright {
width
:
0
;
height
:
0
;
border-bottom
:
100px
solid
red
;
border-left
:
100px
solid
transparent
;
}
|
<style>
.demo_line_01 {
width: 200px;/*这指的是文字的宽度*/
padding: 0 20px 0;
margin: 20px auto;
line-height: 1px;
border-left: 200px solid #ddd;
border-right: 200px solid #ddd;
text-align: center;
}
.demo_line_02 {
width:100%;/*这指的是整个行的宽度*/
margin:0 auto;
height: 1px;
border-top: 1px solid #ddd;
text-align: center;
}
.demo_line_02 span {
position: relative;
top: -10px;
background: #666;/*背景可改成白色*/
padding: 0 20px;
}
</style>
</head>
<body>
<div class="demo_line_01">分割线 </div>
<div class="demo_line_02"><span>分割线</span></div>
</body>
-----------------------------------------------------------------------------------
CSS3 修改和去除移动端点击事件出现的背景框 (tap-highlight-color)
移动端页面时学到了不少CSS3的有用属性，其中有一个印象比较深入的属性：-webkit-tap-highlight-color
参见 http://css-infos.net/property/-webkit-tap-highlight-color
这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。
例如在Adnroid版本的微信中，点击a标签时将会出现一个橙色的小框表示点击的响应。
此时，若是对元素设置了tap-highlight-color值，例如:
-webkit-tap-highlight-color: rgba(240,240,240,0.7);
则可改变元素被点击时背景框的颜色。
若是须要背景框不显示，则能够将rgba中的alpha值设为0便可，例如-webkit-tap-highlight-color : rgba(0,0,0,0);
另外还有一个设置选中文字颜色的方法。
一般咱们选中文字时的背景色是蓝色。咱们能够用如下样式去设置网页的选中内容的样式：
::selection { background:#FFF; color:#333; }
::-moz-selection { background:#FFF; color:#333; }
::-webkit-selection { background:#FFF; color:#333;}
若是要去掉选中时的颜色，把background都置为none就好了。
css3属性 -webkit-font-smoothing
CSS3里面加入了一个“-webkit-font-smoothing”属性，能够使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
加上以后就顿时感受页面小清晰了。 淘宝也在用哦！
它有三个属性：
none ------ 对低像素的文本比较好
subpixel-antialiased ------默认值
antialiased ------抗锯齿很好
例子：
body{
-webkit-font-smoothing: antialiased;
}
附：-moz-osx-font-smoothing: inherit | grayscale
这个属性也是更清晰的做用，特别是图标文字流行的今天。
--------------------------------------------------------
2016.1.8
rem特色
rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。目前，除了IE8及更早版本外，全部浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是
p {font-size:14px; font-size:.875rem;}
-------------------------------------------------------------------------------------------
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child (odd) {
background-color: #f1f1f1;
}
table tr :nth-child(even) {
background-color: #ffffff;
}
</style>
.css('backgroundColor','transparent')
ellipse,椭圆形圆角border-radius
border-radius：50% / 100% 100% 0 0；
border-radius：100% 0 0 100% / 50%
border-radius：100% 0 0 0；
clip-path : polygon(50% 0,100% 50%；50% 100%。0 50%)
1/4的椭圆
css中的连字符- ，js不认识，全部须要改为第二个单词 的首字母大写，如borderLeftWidth
.clear_f {clear: both;overflow: hidden;height: 0;}
- 1. CSS3
- 2. css3
- 3. 【CSS3】
- 4. CSS3滤镜(filter)--CSS3技术
- 5. 【CSS3】CSS3 滤镜实现
- 6. 【css3】CSS3动画（animation @keyframes）
- 7. CSS3简介及CSS3边框
- 8. CSS3 Transform
- 9. HTML5 CSS3
- 更多相关文章...
- • W3C CSS 活动 - W3C 教程
- • jQuery Mobile 过渡 - jQuery Mobile 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS3
- 2. css3
- 3. 【CSS3】
- 4. CSS3滤镜(filter)--CSS3技术
- 5. 【CSS3】CSS3 滤镜实现
- 6. 【css3】CSS3动画（animation @keyframes）
- 7. CSS3简介及CSS3边框
- 8. CSS3 Transform
- 9. HTML5 CSS3