邊框

圓角

• border-radius
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radlius
• border-bottom-right-radius

盒子陰影

• box-shadow

  box-shadow:5px 5pxbox-shadow:5px 5px #cccbox-shadow:5px 5px 10px #cccbox-shadow:left top blur offset color inside , ....

邊框圖片

• border-image-source 圖片地址
• border-image-slice 圖片截取方式 值 浮點數/百分比
• border-image-width 邊框圖片厚度 值 長度單位
• border-image-outset 外延 值 長度單位
• borde-image-repeat 延伸方式 值 stretch/repeat/round/space

• border-image

  border-image:source slice/width/outset repeat

盒子倒影

• box-reflect

  -webkit-box-reflect:direction offset 遮罩direction: above/below/left/rightoffset:長度單位遮罩：url/漸變

CSS3 背景屬性

新增屬性

• background-origin padding-box/border-box/content-box

• background-clip border-box/padding-box/content-box/text

  -webkit-background-clip:text

• background-size cover/contain/length length

多重背景

CSS文本屬性

文本陰影

• text-shadow

  text-shadow:offset_left offset_right blur color

文本換行

• word-wrap 值 normal/break-word CSS改為 overflow-wrap
• word-break 值 normal/keep-all/break-all
• white-space 值 noraml/pre/nowrap/pre-wrap/pre-line

文本溢出

• text-overflow 值 clip/ellipsis 概述要生效 必須設置overflow不是visible值， 并且設置 white-space為nowrap

文字修飾

• text-decoation
• text-decoraion-line none/underline/overline/line-through
• text-decoration-style solid/dotted/double/dashed/wavy
• text-decoration-color
• text-decoration-skip
• text-decoration-position
  

文字描邊

• -webkit-text-fill-color
• -webkit-text-stroke
• -webkit-text-stroke-width
• -weibkit-text-stroke-color
  

其他屬性

• text-transform 值 none/capitalize/uppercase/lowercase
• tab-size 必須把white-space 設置為 pre/pre-wrap/pre-line 才生效 值 長度單位 規定制表符 長度
• text-align start/end
• text-align-last 只設置最后一行 值 同text-align

轉載于:https://www.cnblogs.com/DCL1314/p/7305991.html

總結

以上是生活随笔為你收集整理的CSS边框属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。