css3文本、盒模型陰影、倒影、自由縮放

css3新增盒模型陰影
box-shadow:[inset] x y blur [spread] color
參數(shù)
inset:投影方式
inset:內(nèi)投影
不給:外投影
x、y:陰影偏移
blur:模糊半徑
spread:擴展陰影半徑
先擴展原有形狀,再開始畫陰影
Color

文本陰影
box-shadow:x y blur color;
div {
color: #fff;
text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);
}
div {
color: rgba(255, 179, 140,0.5);
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}

box-reflect 倒影
direction 方向 above|below|left|right;
距離
漸變(可選)

resize 自由縮放
Both 水平垂直都可以縮放
Horizontal 只有水平方向可以縮放
Vertical 只有垂直方向可以縮放
注意:一定要配合overflow:auto 一塊使用只有水平方向可以縮放

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 可視寬(高)=border+padding+width(height) 1> padding內(nèi)填充(padding...
    奶瓶SAMA閱讀 214評論 0 0
  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,296評論 0 11
  • text-shadow是給文本添加陰影效果,box-shadow是給元素塊添加周邊陰影效果。隨著HTML5和CSS...
    arlene112閱讀 2,330評論 0 1
  • 總是希望,光陰能夠慢下來,日子能夠簡而又簡。光陰的故事里,每一秒都能開出繁花朵朵。閑下來的光陰里,會多一些時...
    那些年聆聽的閱讀 234評論 0 0
  • 你的眸 像夜幕雙子星般閃爍 溫柔了 那么清澈見底的湖泊 一雙手 竟變得比親人還親厚 溫暖著 冰天雪地每一個角落 為...
    認(rèn)真的紅玫瑰閱讀 213評論 2 1

友情鏈接更多精彩內(nèi)容