tft每日頭條

 > 圖文

 > css 邊框陰影

css 邊框陰影

圖文 更新时间:2024-09-30 22:20:11
二、CSS陰影（box-shadow）1.盒子陰影

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

屬性值

特點

h-shadow

必需，水平陰影位置，可負

v-shadow

必需，垂直陰影位置，可負

blur

可選，模糊距離（虛實）

spread

可選，陰影尺寸（大小）

color

可選，陰影顔色rgba(0,0,0,.3)

inset

可選，将外部陰影（outset）改為内部陰影

  • 默認為外陰影(outset)，但是不可以寫這個單詞，否則無效
  • 盒子陰影不占用空間，不會影響其他盒子排列
  • 鼠标經過div為div:hover {box-shadow: 10px 10px;}

css 邊框陰影（CSS基礎知識八CSS陰影及圓角邊框）1

2.文字陰影（text-shadow）

語法 text-shadow：h-shadow v-shadow blur color；

css 邊框陰影（CSS基礎知識八CSS陰影及圓角邊框）2

css 邊框陰影（CSS基礎知識八CSS陰影及圓角邊框）3

三、圓角邊框（border-radius）

語法 border-radius：length;

  • 半徑原理：圓與邊框的交集形成圓角效果
  • 參數值可以為數值或百分比形式
  • 若為正方形，想設置為圓，把數值改為高/寬的一半，或直接寫為50%
  • 若為矩形，設為高的一半即可
  • 該屬性是一個簡寫屬性，可以跟四個值，分别代表左上角，右上角，右下角，左下角
  • 分開寫：border-top-left-radius | border-top-right-radiusborder-bottom-left-radius | border-bottom-right-radius

css 邊框陰影（CSS基礎知識八CSS陰影及圓角邊框）4

css 邊框陰影（CSS基礎知識八CSS陰影及圓角邊框）5

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
查看全部
上一页 下一页
房地産相關有用的證書
cma證書與cnas...

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

關于
條款和條件 隱私政策 Cookie 設置
服務
登陸 注冊 聯系我們
tft每日頭條 美食 生活 職場 母嬰 時尚 科技 汽車
友情鏈接
zpostcode Recruit weather mreligion Yellowpages sport constellation shopping name game directory literature Word tour furnish Lottery tftnews lyrics News digital car dir Edu Finance
Copyright 2023-2024 - www.tftnews.com All Rights Reserved