how to make edges round in CSS?

醉酒当歌 提交于 2020-01-04 13:58:10

问题


I am beginner coder in web design so I have a fairly amateur question to ask. I have created a box of text but I don't know how to make the edges round rather than rectangular. I know that CSS functions on rectangular borders. If possible, I would also like to add a slight shadow beneath the box, I'm not sure how to implement this also. Here is my code specifically for the box section:

#wrapper{
border: solid 1px #eeeeee;
}

"#wrapper" refers to a piece of php code in another document. Thank you.


回答1:


Using border-radius and box-shadow.

#wrapper {
    border: solid 1px #eee;
    border-radius:10px; /* round corners */
    box-shadow:0px 3px 5px 5px #000; /* add shadow */
}

Here are the parameters for each...

border-radius:(radius of border corners)
box-shadow:(horizontal offset) (vertical offset) (blur) (spread) (color)

You may wish to prefix your CSS3 properties with -webkit and -moz to increase compatibility with older browsers.




回答2:


#wrapper {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

check this out!




回答3:


For browsers which do not support border-radius, you can use roundies.js.



来源:https://stackoverflow.com/questions/9061014/how-to-make-edges-round-in-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!