css揭秘筆記——形狀

dantezhao 發布于2019-08-29 13:47 / 3354人閱讀

摘要：把改成，就變成了這樣實現邊框內圓角多重邊框還有下實現多重背景為某一層背景多帶帶設置類似這樣的屬性等等。裁切路徑方案這種方案，當內邊距不夠寬時，會裁切掉文本。

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

長寬固定的元素，可以通過指定寬高的一半，變為橢圓形，格式為兩個值用/分開。

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

效果如下：

百分比值

寬高不固定的元素，還可以通過指定百分比值來實現自適應橢圓的效果。

 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]

當然，各個值也可以省略，1~4個均可，會以CSS常規方法重復。

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

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

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

border-radius:100% 0 0;

平行四邊形

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

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

可以選擇偽元素的方式：

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

這種方法，可以應用在想變形一個元素而不想變形它的內容的場景。

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

實現邊框內圓角

.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下實現多重背景、為某一層“背景”多帶帶設置類似opacity這樣的屬性等等。

菱形圖片 基于變形的方案


    


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

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

基于裁切路徑方案

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

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

.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%);
}

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

切角效果

直切角

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斜向線性漸變

弧形切角

把線性漸變改為徑向漸變，就變成了內凹圓角。

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

這種方案，當內邊距不夠寬時，會裁切掉文本。因為它是對整個元素進行裁切。

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

梯形標簽

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

.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; /*以元素底邊旋轉，底邊和原元素底部等長。（默認以中軸線旋轉，元素大小容易不受控制）*/
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg); /*旋轉后，比原元素矮了，在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;

就變成了這個樣子：

云服務器 GPU云服務器大揭秘揭秘云存儲云計算揭秘人工智能揭秘

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112702.html

css揭秘筆記——視覺效果

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

skinner 2019-08-29 13:48 評論0 收藏0
《css揭秘》讀書筆記

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

xiguadada 2019-08-29 16:28 評論0 收藏0
[CSS]《CSS揭秘》第三章——形狀

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

ysl_unh 2019-08-30 15:53 評論0 收藏0
《css揭秘》下（偽元素，文字背景，垂直居中技巧，文字環繞）

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

longmon 2019-04-23 13:14 評論0 收藏0
《css 揭秘》讀書筆記

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

OnlyMyRailgun 2019-08-29 13:20 評論0 收藏0