> 웹 프론트엔드 > HTML 튜토리얼 > css3圆角边框,边框阴影_html/css_WEB-ITnose

css3圆角边框,边框阴影_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:34:40
원래의
1749명이 탐색했습니다.

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;

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿