css3如何實現圓角邊框和邊框陰影

這篇文章主要講解了“css3如何實現圓角邊框和邊框陰影”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css3如何實現圓角邊框和邊框陰影”吧！

border-radius向元素添加圓角邊框，css3中的。IE9+ chrome safari5+ firefox4+ 現在都支持。可以向input div等設置邊框。與border相似，可以四個角一起設置，也可以單獨設置。

語法：

border-radius: 1-4 length|% / 1-4 length|%;
-moz-border-radius:10px;支持舊的firefox
-webkit-border-radius:10px;支持chrome

按top-left, top-right, bottom-right, bottom-left順序設置每個 radius 的值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。

例子1:

border-radius:2px;

等價于：

border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;

例子2:

border-radius:2em 1em 4em / 0.5em 3em;

等價于：

border-top-left-radius:2em 0.5;
border-top-right-radius:1em 3em;
border-bottom-right-radius:4em 0.5em;
border-bottom-left-radius:1em 3em;

box-shadow向框添加一個或多個陰影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。

語法：

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

h-shadow,v-shadow必須。水平，垂直陰影的位置。允許賦值。blur可選，模糊距離。spread可選，陰影的尺寸。color可選，陰影的顏色。inset可選，將外部陰影（outset）改為內部陰影。

例子：

box-shadow: inset 3px 3px 6px #ccc;

css的基本語法是什么

css的基本語法是：

1、css規則由選擇器和一條或多條聲明兩個部分構成；

2、選擇器通常是需要改變樣式的HTML元素；

3、每條聲明由一個屬性和一個值組成；

4、屬性和屬性值被冒號分隔開。

感謝各位的閱讀，以上就是“css3如何實現圓角邊框和邊框陰影”的內容了，經過本文的學習后，相信大家對css3如何實現圓角邊框和邊框陰影這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！