css 邊框

cgh1999520 發(fā)布于2019-08-30 15:52 / 3444人閱讀

摘要：創(chuàng)建出的假邊框出現在元素的外圈，并不會響應鼠標事件比如懸?；螯c擊。給屬性加上關鍵字來使投影繪制在元素的內圈。圖請注意此時你需要增加額外的內邊距來騰出足夠的空隙。

css 邊框 半透明邊框

border: 10px solid hsla(0,0%,100%,.5); 
background: white;
background-clip: padding-box;

多重邊框

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 水平偏移負值表示陰影在左側

v-shadow 垂直偏移負值表示陰影在上方

blur 模糊距離

spread 擴張半徑

color 顏色

inset 外部陰影改為內部陰影

一個正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值

支持逗號分隔語法,可以創(chuàng)建任意數量的投影

注意：box-shadow 是層層疊加的,第一層投影位于最頂層,依次類推

投影的行為跟邊框不完全一致,因為它不會影響布局,而且也不會受到 box-sizing 屬性的影響，可以通過內邊距或外邊距(這取決于投影是內嵌和還是外擴的)來額外模擬出邊框所需要占據的空間。

創(chuàng)建出的假“邊框”出現在元素的外圈，并不會響應鼠標事件,比如懸?；螯c擊。給 box-shadow屬性加上inset關鍵字,來使投影繪制在元素的內圈。圖2-6 請注意,此時你需要增加額外的內邊距來騰出足夠的空隙。

background: yellowgreen; 
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);

outline

問題：只需要兩層邊框

先設置一層常規(guī)邊框,再加上 outline(描邊) 屬性來產生外層的邊框

通過 outline-offset 屬性來控制跟元素邊緣之間的間距,可以接受負值(縫邊效果)

邊框不一定會貼合 border-radius 屬性產生的圓角,因此如果元素是圓角的,它的描邊可能還是直角的

邊框內圓角

問題：只要一個元素

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

描邊不會跟著元素圓角走，box-shadow 會

投影擴張值不能小于 (√2 ?1)r，（r為border-radius值）

連續(xù)圖像邊框

螞蟻行軍邊框

@keyframes ants {
  to {
    background-position: 100% 
  } 
}
.marching-ants {
  padding: 1em;
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
              repeating-linear-gradient(-45deg,black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
  animation: ants 12s linear infinite;
}

云服務器 GPU云服務器文字邊框設置邊框圖片邊框無邊框

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

轉載請注明本文地址：http://systransis.cn/yun/116524.html

前端學習之路之CSS （四）

摘要：塊元素的例子內聯元素只需要必要的寬度，不強制換行。內聯元素的例子如何改變一個元素顯示可以更改內聯元素和塊元素把列表項顯示為內聯元素把元素作為塊元素定位五大屬性定位元素的默認值，即沒有定位，元素出現在正常的流中靜態(tài)定位的元素不會受到影響。?Infi-chu: http://www.cnblogs.com/Infi-chu/ ? CSS盒子模型?? ?概念：CSS盒模型本質上是一個盒子，封裝周圍...

hosition 2019-04-23 13:19 評論0 收藏0
【基礎】CSS實現多重邊框的5種方式

摘要：簡言目前最優(yōu)雅地實現多重邊框的方案是利用的屬性，但如果要兼容老的瀏覽器，則需要選擇其它的方案。方案是最簡單，最直接的實現多重邊框的方式。只有一行代碼就可以實現多重邊框效果。簡言目前最優(yōu)雅地實現多重邊框的方案是利用CSS3 的 box-shadow屬性，但如果要兼容老的瀏覽器，則需要選擇其它的方案。本文簡要地列舉了幾種多重邊框的實現方案，大家可以根據項目實際及兼容性要求等情況，選擇最...

mrli2016 2019-08-29 15:16 評論0 收藏0
HTML補充+CSS基礎

摘要：文件的編碼格式頁面的編碼格式設置當前頁面的編碼格式在瀏覽器運行當前頁面時，告訴瀏覽器當前的編碼格式字符集概念存放所使用的所有的字符漢字分類美國歐洲中國萬國碼主要使用計算機的存儲方式利用二進制方式和中國存儲將文件的編碼格式 - UTF-8 HTML頁面的編碼格式 - UTF-8 設置當前HTML頁面的編碼格式在瀏覽器運行當前HTML頁面時，告訴瀏覽器當前的編碼格式字符...

CoorChice 2019-08-29 12:39 評論0 收藏0
CSS實現無外邊框列表效果

摘要：方法一使用外層容器切割方法一使用外層容器切割給每一個設定右邊框和下邊框線把放置在一個外層中，設定的寬高，通過將一部分的邊框隱藏此方法只需要計算父容器的寬高，能應付任何行與列數，推薦使用。方法一：使用外層容器切割給每一個 li 設定右邊框和下邊框線把ul放置在一個外層div中，設定div的寬高，通過overflow:hidden將一部分li的邊框隱藏此方法只需要計算父容器的寬高，能應...

kbyyd24 2019-04-23 11:46 評論0 收藏0
CSS3 邊框

摘要：邊框用，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序，如。在本章中，您將了解以下的邊框屬性圓角在中添加圓角棘手。 CSS3 邊框用 CSS3，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序，如 Photoshop。在本章中，您將了解以下的邊框屬性： border-radius box-shadow border-image CSS3 圓角在 ...

Charles 2019-08-29 13:25 評論0 收藏0
詳解css3之border-image

摘要：屬性用來指定邊框所需素材的路徑，語法可以參照。當圖片碰到邊界時，如果超過則被截斷。圖片會根據邊框的尺寸動態(tài)調整圖片的之間的間距直至正好可以鋪滿整個邊框。如下圖后續(xù)是屬性所以存在兼容性問題，需要在屬性前面設置等 border-image簡介 css3中新增了一個屬性border-image，這個屬性允許開發(fā)者使用圖片來定義邊框,擴充了 CSS2 中僅有的幾個預定義邊框樣式(border-...

jackzou 2019-08-21 10:46 評論0 收藏0