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

資訊專欄INFORMATION COLUMN

css揭秘筆記——形狀

dantezhao / 3386人閱讀

摘要：把改成，就變成了這樣實現(xiàn)邊框內(nèi)圓角多重邊框還有下實現(xiàn)多重背景為某一層背景多帶帶設(shè)置類似這樣的屬性等等。裁切路徑方案這種方案，當(dāng)內(nèi)邊距不夠?qū)挄r，會裁切掉文本。

自適應(yīng)的橢圓（border-radius的用法） 多帶帶指定水平和垂直半徑

長寬固定的元素，可以通過指定寬高的一半，變?yōu)闄E圓形，格式為兩個值用/分開。

width: 100px; 
height: 80px; 
border-radius: 50px/40px;
background: orange;

效果如下：

百分比值

寬高不固定的元素，還可以通過指定百分比值來實現(xiàn)自適應(yīng)橢圓的效果。

 border-radius: 50%/50%;

還可以簡寫為

border-radius: 50%;

### 為每個角指定不同的值

border-radius的展開屬性為：

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

也可以直接簡寫：
border-radius： [top-left-horizon] [top-right-horizon] [bottom-right-horizon] [bottom-left-horizon] / [top-left-vertical] [top-right-vertical] [bottom-right-vertical] [bottom-left-vertical]

當(dāng)然，各個值也可以省略，1~4個均可，會以CSS常規(guī)方法重復(fù)。

利用這個特性，就可以實現(xiàn)半個橢圓或四分之一個橢圓的效果。

border-radius:50%/ 100% 100% 0 0;


border-radius:100% 0 0 100%/ 50%;


border-radius:100% 0 0;

平行四邊形

形變，用transform: skewX(-45deg)，可以得到平行四邊形，但是，元素中的字體也會跟著形變，就像這樣：

添加一個標(biāo)簽，使用嵌套的方案，并不是很好的方法。

可以選擇偽元素的方式：

.button{
    position: relative;
    
}
.button::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: orange;
    transform: skewX(-45deg);
    z-index: -1;
}

這種方法，可以應(yīng)用在想變形一個元素而不想變形它的內(nèi)容的場景。

把skew改成rotate，就變成了這樣：

實現(xiàn)邊框內(nèi)圓角

.inner-radius{
    position: relative;
    border-radius: 20px;
    background: white;
}
.inner-radius::before{
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    background: orange;
    z-index: -1;
}

多重邊框

.borders{
    position: relative;
    border: 2px dashed orange;
}
.borders::before{
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    border: 2px dashed green;
    z-index: -1;
}

還有IE8下實現(xiàn)多重背景、為某一層“背景”多帶帶設(shè)置類似opacity這樣的屬性等等。

菱形圖片 基于變形的方案 

    girl



.picture{
    width:300px;
    transform: rotate(45deg); 
    overflow: hidden;
}
.picture>img{
    transform: rotate(-45deg) scale(1.42);
}

但是這種方法需要一個多余的div，并且對正方形的圖片比較適用。下面的方法非常適應(yīng)非正方形的圖片。

基于裁切路徑方案 
/*直接在img元素上應(yīng)用該屬性，將圖片裁切成想要的樣子，用多邊形函數(shù)polygon()指定一個菱形*/
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

還可以將clip-path參與到過渡動畫。（動畫需要在同一種形狀函數(shù)，并且點相同）

.clip-img{
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 
    transition: 1s clip-path;
}
.clip-img:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

這樣就有了鼠標(biāo)懸停時，圖片擴展為原來的形狀和大小。

切角效果

直切角

background: 
    linear-gradient(45deg, transparent 15px, orange 0) left bottom,
    linear-gradient(-45deg, transparent 15px, orange 0) right bottom,
    linear-gradient(135deg, transparent 15px, orange 0) left top,
    linear-gradient(-135deg, transparent 15px, orange 0) right top;
background-size: 50% 50%;
background-repeat: no-repeat;

注意，這個角度讓我一度很困惑，它是這樣的：

參考： 張鑫旭-深入理解CSS3 gradient斜向線性漸變

弧形切角

把線性漸變改為徑向漸變，就變成了內(nèi)凹圓角。

background: 
    radial-gradient(circle at left bottom, transparent 15px, orange 0) left bottom,
    radial-gradient(circle at right bottom, transparent 15px, orange 0) right bottom,
    radial-gradient(circle at left top, transparent 15px, orange 0) left top,
    radial-gradient(circle at right top, transparent 15px, orange 0) right top;
background-size: 50% 50%;
background-repeat: no-repeat;

裁切路徑方案

background: orange;
clip-path: polygon(20px 0, calc(100%-20px) 0, 100% 20px, 100% calc(100% -20px), calc(100% - 20px) 100%, 20px 100%,0 calc(100% - 20px), 0 20px);

這種方案，當(dāng)內(nèi)邊距不夠?qū)挄r，會裁切掉文本。因為它是對整個元素進(jìn)行裁切。

深入了解clip-path polygon，戳這里

梯形標(biāo)簽

使用3D形變，以x軸旋轉(zhuǎn)，形成梯形的效果。為了避免標(biāo)簽中的字體也變形，還使用“平行四邊形”實現(xiàn)方式（偽元素）。

.tab{
    position: relative;
    text-align: center;
    line-height: 30px;
}
.tab::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform-origin: bottom; /*以元素底邊旋轉(zhuǎn)，底邊和原元素底部等長。（默認(rèn)以中軸線旋轉(zhuǎn)，元素大小容易不受控制）*/
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg); /*旋轉(zhuǎn)后，比原元素矮了，在Y軸方向上拉伸至原來的長度。（盡量不改變原元素，保證回退后的效果）*/
    background-color: orange;
    z-index: -1;
}

這種方式很容易添加其他樣式，如，在偽元素中加入以下樣式：

background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;

就變成了這個樣子：

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

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

相關(guān)文章

  • css揭秘筆記——視覺效果

    摘要：實現(xiàn)染色效果的混合模式是，它會保留上層元素的高亮信息，并從它的下層吸取色相和飽和度信息。當(dāng)我們只有一個背景圖像及一個透明背景色時，就不會有任何混合效果。 投影 知識點 box-shadow: [inset]? 注意： 在元素正下方的投影被裁切掉了，是沒有的；而text-shadow不同，文字下方的投影不會被裁切。 box-shadow的第三個參數(shù)是模糊半徑，假如設(shè)置4px...

    skinner 評論0 收藏0

  • 《css揭秘》讀書筆記

    摘要：但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用這個單位。由于基本都是一些實用性的技巧，我就不一一列舉了，建議自讀。很好很實用的一本書。 第一章 引言 css編碼技巧 在引言中，作者提到使用em與inherit來實現(xiàn)css代碼的簡潔與可維護性。但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用em這個單位。如何用以及何時去使用，還是要根據(jù)實際開發(fā)需求來定吧，畢竟這兩個屬性...

    xiguadada 評論0 收藏0

  • [CSS]《CSS揭秘》第三章——形狀

    摘要：自適應(yīng)橢圓斜杠前為水平半徑，后為垂直半徑。和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。所以不要用或展示有實際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標(biāo)。和必須配合屬性來使用，用來定義插入的內(nèi)容，必須有值，至少是空。 自適應(yīng)橢圓 border-radius:50% / 50%;//斜杠前為水平半徑，后為垂直半徑。 background: #fb3; b...

    ysl_unh 評論0 收藏0

  • 《css揭秘》下（偽元素，文字背景，垂直居中技巧，文字環(huán)繞）

    摘要：本篇主要記錄揭秘一書中后面幾章的常用技巧。文字環(huán)繞的重點在于即文字圍繞著路徑來顯示。本篇主要記錄《CSS3揭秘》一書中后面幾章的常用技巧。 1、偽元素?fù)Q行 先看下HTML代碼，如下 當(dāng)愛的故事剩聽說 我找不到你單純的面孔 默認(rèn)顯示效果： 一般情況下，我們喜歡直接在第一個span元素后面加個換行符，但是它對于語義來說并不友好,或者將第一...

    longmon 評論0 收藏0

  • 《css 揭秘》讀書筆記

    摘要：因為鮮為人知的第四個長度參數(shù)雙層投影毛玻璃效果見毛玻璃自定義復(fù)選框不多介紹，也有相關(guān)案例復(fù)選框滾動提示現(xiàn)在越來越多的移動端都是這樣處理，滾動提示其他揭秘對應(yīng)的地址圖靈圖書在封底都提供優(yōu)惠碼低價購買電子書她 目標(biāo) 如何用 css 解決難題 收獲 盡量減少代碼重復(fù) 1 用相對值 font-size: 20px; line-height: 30px; // 應(yīng)該改成 font-size:...

    OnlyMyRailgun 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<