bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS3如何做出多樣邊框特效

本文將為大家詳細介紹“CSS3如何做出多樣邊框特效”,內容步驟清晰詳細,細節處理妥當,而小編每天都會更新不同的知識點,希望這篇“CSS3如何做出多樣邊框特效”能夠給你意想不到的收獲,請大家跟著小編的思路慢慢深入,具體內容如下,一起去收獲新知識吧。

成都創新互聯公司主要從事做網站、成都網站制作、網頁設計、企業做網站、公司建網站等業務。立足成都服務沂源,十載網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:18980820575

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言,主要是用來設計網頁的樣式,使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言,并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中,而樣式規則的優先級由css根據這個層次結構決定,從而實現級聯效果,發展至今,css不僅能裝飾網頁,也可以配合各種腳本對于網頁進行格式化。

半透明邊框

實現效果:

CSS3如何做出多樣邊框特效

實現代碼:

<p>
你能看到半透明的邊框嗎?
</p>
p {
    /* 關鍵代碼 */
    border: 10px solid rgba(255,255,255,.5);
    background: white;
    background-clip: padding-box;
    /* 其它樣式 */
    max-width: 20em;
    padding: 2em;
    margin: 2em auto 0;
    font: 100%/1.5 sans-serif;
}

實現要點:

設置邊框為半透明,這是還看不到半透明邊框,因為默認情況下,背景會延伸到邊框所在的區域下層,也就是背景是被邊框的外沿框裁切掉。

通過設置 background-clip: padding-box (初始值是 border-box) 讓背景不要延伸到邊框所在的區域下層,也就是讓內邊距的外沿來裁切背景。

多重邊框

實現效果:

CSS3如何做出多樣邊框特效

實現代碼:

<p></p>
/* box-shadow 實現方案 */
p {
    /* 關鍵代碼 */
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
    /* 其它樣式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}
/* border/outline 實現方案 */
p {
    /* 關鍵代碼 */
    border: 10px solid #655;
    outline: 5px solid deeppink;
    
    /* 其它樣式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

實現要點:

box-shadow 實現方案使用的是 box-shadow 的第四個參數(擴張半徑)。一個正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值,得到的“投影”其實就像一道實線邊框。而借助 box-shadow 支持逗號分割語法,可創建任意數量的投影,因此我們就可實現多重邊框效果。

border/outline 實現方案是使用 border 設置一層邊框,再使用outline 設置一層邊框。這個方案可實現虛線邊框,但它只能實現兩層邊框。

邊框內圓角

實現效果:

CSS3如何做出多樣邊框特效

實現代碼:

<p>我有一個漂亮的內圓角</p>
p {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* 關鍵代碼 */
    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
    font: 100%/1.5 sans-serif;
}

實現要點:

outline 不會跟著元素的圓角走(因而顯示出直角),但 box-shadow 確實會的,因此,將兩者疊加到一起,box-shadow(其擴張值大概等于 border-radius 值的一半) 會剛好填補 outline 和容器圓角之間的空隙,因此可達到我們想要的效果。

如果你能讀到這里,小編希望你對“CSS3如何做出多樣邊框特效”這一關鍵問題有了從實踐層面最深刻的體會,具體使用情況還需要大家自己動手實踐使用過才能領會,如果想閱讀更多相關內容的文章,歡迎關注創新互聯行業資訊頻道!

當前文章:CSS3如何做出多樣邊框特效
網站URL:http://vcdvsql.cn/article26/gdgdcg.html

成都網站建設公司_創新互聯,為您提供靜態網站面包屑導航外貿網站建設網站設計網站排名

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

商城網站建設