成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS3學(xué)習(xí)小結(jié)

WrBug / 1620人閱讀

摘要：看到人家實(shí)現(xiàn)的實(shí)在是太棒了，就想到該學(xué)學(xué)了。屬性用來查詢?yōu)g覽器是否支持新特性。還有語句，不支持的時(shí)候執(zhí)行。還支持多個(gè)條件塊，，，。瀏覽器支持情況只有，，的支持情況比較好。

這幾日在
http://lab.iamvdo.me/houdini/
看到了很炫酷的CSS實(shí)現(xiàn)。看到人家實(shí)現(xiàn)的實(shí)在是太棒了，就想到該學(xué)學(xué)CSS了。

@support屬性

@support:用來查詢?yōu)g覽器是否支持css新特性。
目前各大瀏覽器對@support的支持情況：

現(xiàn)代瀏覽器除了IE系列之外，都對@supports有很強(qiáng)的的支持性，甚至在移動(dòng)設(shè)備上的支持度也非常好 。
使用方法：

@supports (property: value) { element { property: value; } }

如果瀏覽器支持property: value，將會(huì)渲染花括號(hào)里面的語句塊。還有not語句，不支持的時(shí)候執(zhí)行。

@supports not (property: value) { element { property: value; } }

還支持多個(gè)條件塊，and，or，not。例子如下：

@supports (property1: value1) and (property2: value2) { 
element { property1: value1; property2: value2; }
 }

@supports (property1: value1) or (-webkit-property1: value1) { 
element { -webkit-property1: value1; property1: value1; }
 }
shape-outside屬性

shape-outside：Allows geometric shapes to be set in CSS to define an area for text to flow around.設(shè)定元素形狀，字體環(huán)繞在形狀周邊。
瀏覽器支持情況：


只有chorme，safari，opera的支持情況比較好。

具體屬性介紹：
/* Keyword values */
shape-outside: none;shape-outside: margin-box;shape-outside: content-box;shape-outside: border-box;shape-outside: padding-box;

/* Function values */
shape-outside: circle();shape-outside: ellipse();shape-outside: inset(10px 10px 10px 10px);shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/*  value */
shape-outside: url(image.png);

/*  value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* Global values */
shape-outside: initial;shape-outside: inherit;shape-outside: unset;

瀏覽器屬性支持情況：

基本特性只有chrome37,opera24,safari8.0以上版本支持。

demo：circle特性。
img{
    shape-outside: circle(50%);
    float: left;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #333;
}

必須要加float:left;后shape-outside才生效，使用和float相近的display:inlie-block也不行
demo之shape-outside:content-box
img{
     shape-outside: content-box;
    float: left;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #333;
    margin: 20px;
}

demo之shape-outside: margin-box
img {
    shape-outside: margin-box;
     float: left;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #333;
    margin: 20px;
 }

demo之shape-outside:ellipse
img?{
    shape-outside:?ellipse(60% 80%);
    float:?left;
    overflow:?hidden;
    border-radius:?60% 80% 60% 80%;
    border:?2px solid?#333;
}

ellipse橢圓，只能設(shè)置兩個(gè)值，和border-radius的實(shí)現(xiàn)方式不一樣。
demo之shape-outside:inset()
img?{
    shape-outside:?inset(10px 20px 10px 10px);
    float:?left;
    overflow:?hidden;
    border-radius:?60% 80% 60% 80%;
    border:?2px solid?#333;
}

mix-blend-mode

mix-blend-mode:

The mix-blend-mode CSS property describes how an element"s content should blend with the content of the element"s direct parent and the element"s background.

元素內(nèi)容和元素的直接父元素以及元素的背景混合。
瀏覽器兼容情況：


各屬性含義：

demo：
p {
 color: black;
 font-size: 40px;
 position: absolute;
 margin-top: -300px;
 height: 200px;
 width: 800px;
 mix-blend-mode: overlay;
}
img{
 width:400px;
}


不設(shè)置mix-blend-mode的圖片對比：

background-blend-mode

background-blend-mode：可以是背景圖片間的混合，也可以是背景圖片和背景色的混合。
瀏覽器兼容性：

demo：背景圖+背景色的混合
div {
    /* background-color: red; //背景色要寫在下面才有用*/
    color: black;
     font-size: 40px;
     background: url(https://pic.mdcdn.cn/h5/pic/201703/[email protected]);
    background-blend-mode: difference;
    height: 200px;
    width: 200px;
    background-color: red;
}
背景色要寫在background-blend-mod下面才有用

總結(jié)

@support的支持度很高，在使用其他三個(gè)屬性之前可以用@support先進(jìn)行查詢。shape-outside可以實(shí)現(xiàn)很好看的文字環(huán)繞效果。mix-blend-mode和background-blend-mode測試的效果看著都不好看，還是需要設(shè)計(jì)師的配合才能做出好看的效果。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112710.html

相關(guān)文章

  • 移動(dòng)端動(dòng)畫小結(jié)

    摘要：一丶方法可以細(xì)化操作，回調(diào)方法，但是在移動(dòng)端安卓卡頓二丶可以用細(xì)化過渡效果，沒有回調(diào)操作，只能監(jiān)控是否已完成。會(huì)存在過度繪制，會(huì)造成幀丟失，繼而導(dǎo)致動(dòng)畫斷續(xù)顯示。 一丶jq/zepto animate()方法 可以細(xì)化操作，回調(diào)方法，但是在移動(dòng)端（安卓）卡頓 二丶css3 animation 可以用@keyframes細(xì)化過渡效果，沒有回調(diào)操作，只能監(jiān)控animation/transi...

    silencezwm 評(píng)論0 收藏0

  • 移動(dòng)端動(dòng)畫小結(jié)

    摘要：一丶方法可以細(xì)化操作，回調(diào)方法，但是在移動(dòng)端安卓卡頓二丶可以用細(xì)化過渡效果，沒有回調(diào)操作，只能監(jiān)控是否已完成。會(huì)存在過度繪制，會(huì)造成幀丟失，繼而導(dǎo)致動(dòng)畫斷續(xù)顯示。 一丶jq/zepto animate()方法 可以細(xì)化操作，回調(diào)方法，但是在移動(dòng)端（安卓）卡頓 二丶css3 animation 可以用@keyframes細(xì)化過渡效果，沒有回調(diào)操作，只能監(jiān)控animation/transi...

    CNZPH 評(píng)論0 收藏0

  • 2018.11.19秋招末第二波前端實(shí)習(xí)/校招小結(jié)

    摘要：背景個(gè)人背景就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí)前端方向，自學(xué)，技術(shù)棧時(shí)間背景大概是在月日準(zhǔn)備好簡歷開始投遞秋招差不多已經(jīng)結(jié)束招聘崗位不多，投遞對象為大一些的互聯(lián)網(wǎng)公司事件背景第一個(gè)入職的是好未來的前端實(shí)習(xí)崗，待遇工 背景 個(gè)人背景 就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí) 前端方向，自學(xué)，vue技術(shù)棧 時(shí)間背景 大概是在11月9日準(zhǔn)備...

    suxier 評(píng)論0 收藏0

  • 2018.11.19秋招末第二波前端實(shí)習(xí)/校招小結(jié)

    摘要：背景個(gè)人背景就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí)前端方向，自學(xué)，技術(shù)棧時(shí)間背景大概是在月日準(zhǔn)備好簡歷開始投遞秋招差不多已經(jīng)結(jié)束招聘崗位不多，投遞對象為大一些的互聯(lián)網(wǎng)公司事件背景第一個(gè)入職的是好未來的前端實(shí)習(xí)崗，待遇工 背景 個(gè)人背景 就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí) 前端方向，自學(xué)，vue技術(shù)棧 時(shí)間背景 大概是在11月9日準(zhǔn)備...

    canger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<