J.chong

圆角
border-radius:左上 右上 右下 左下
border-radius: x軸/y軸
border-radius: 10px 20px 30px 40px / 10px 30px 40px 80px;

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

---

邊框圖片border-image:url 四邊切割大小 排列方式

border-image-sourceg 引入图片

border-image-slice 切割图片

border-image-width 边框宽度

border-image-repeat 图片的排列方式

边框颜色 border-colors

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

---

線性漸變
线性渐变格式：linear-gradient([<起点> || <角度>,]? <点>, <点>…)

重覆平鋪：repeating-linear-gradient

加入点的位置

top, red 40%, green 60%

top, red 50%, green 50%

同一个位置两个点——直接跳变

也可以用px

配合rgba

top, rgba(255,255,255,1), rgba(255,255,255,0)

加入背景图片

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

/*写法一：注意标点*/
background-image:-webkit-linear-gradient(left top,red blue)
/*写法二：*/
background-image:-webkit-linear-gradient(30deg,red,blue,yellow...)
/*写法三：*/
background-image:-webkit-linear-gradient(top,red 0,blue 100%);
/*写法四:重复平铺*/
background-image:-webkit-repeating-linear-gradient(top,red 0,blue 30px);
/*条纹背景：*/
background: -webkit-repeating-linear-gradient(left,green 0,green 10px,#ffffff 10px,#fff 20px);

/*簡單寫*/
.box{ width: 200px; height: 200px;
     background: -webkit-linear-gradient(red,blue);
     background: -moz-linear-gradient(red,blue);
     background: -o-linear-gradient(red,blue);
     background: -ms-linear-gradient(red,blue);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0'); /* 1,左-右 0 上-下 */
    }

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

---

径向渐变:radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);

起点：可以是关键字（left,top,right,bottom），具体数值或百分比

形状： ellipse、circle

大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;

注意firefox目前只支持关键字

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

---

多背景，逗號分開：background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

背景尺寸: background-size:x y

background-size:100% 100%

Cover 放大

Contain 缩小

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

---

background-origin ： border | padding | content

從下面的值開始顯示完整圖片，但無論border，還是padding都會顯示背景，所以需要background-clip;

border-box： 从border区域开始显示背景。

padding-box： 从padding区域开始显示背景。

content-box： 从content区域开始显示背景。

background-clip

border： 从border区域向外裁剪背景。

padding： 从padding区域向外裁剪背景。

content： 从content区域向外裁剪背景。

no-clip： 从border区域向外裁剪背景。

配合：-webkit-background-clip:text; background-position，可做出webkit獨有效果

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
1)先做光暈，background:background: -webkit-linear-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 150px,rgba(255,255,255,1) 150px,rgba(255,255,255,1) 200px,rgba(255,255,255,1) 240px,rgba(255,255,255,0) 300px) no-repeat -300px 0;

2)利用webkit支持-webkit-background-clip: text;/ 只有文字有背景/

3)使用background-position 滑動；
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

---

遮罩，也只有webkit實現

Mask-image

Mask-position

Mask-repeat

实例：特殊形状的幻灯片效果
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}

max-width:800px 最大寬度為800px 即800px以下生效

min-width:800px 最小寬度為800px 即800px以上生效

(min-width:400px) and (max-width:800px) 400-800之間

min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

<link rel="stylesheet" href="css3-2.css" media="screen and (min-width:400px) and (max-width:800px)"/>

@media screen and (min-width: 600px) and (max-width: 900px){
    something....
}

@media all and (orientation:portrait){ /*豎屏，即高>寬*/
    something....
}

@media all and (orientation:landscape){ /*橫屏，即高<寬*/
    something....
}

@media all and (orientation:landscape){ /*橫屏，即高<寬*/
    something....
}

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />

/*大致初始化*/
/* 禁用iPhone中Safari的字号自动调整 */
html {
    -webkit-text-size-adjust: none;
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
/* 设置图片视频等自适应调整 */
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
    width: 100%;
    height: auto;
}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}
@media only screen and (max-device-width :480px){ }
@media only screen and (min-device-width :481px){ }

/*6*/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

/*6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

/*4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }