如何在CSS中使边缘变圆? [英] how to make edges round in CSS?

问题描述

我是网页设计的初学者，所以我有一个非常业余的问题要问.我创建了一个文本框，但是我不知道如何使边缘变圆而不是矩形.我知道CSS在矩形边框上起作用.如果可能的话，我还要在方框下方添加一个阴影，我不确定该如何实现.这是我专门针对box部分的代码:

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"是指另一个文档中的一段php代码.谢谢.

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

推荐答案

使用border-radius和box-shadow.

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

这是每个...的参数

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

您可能希望在CSS3属性前添加-webkit和-moz前缀，以增强与旧版浏览器的兼容性.

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

这篇关于如何在CSS中使边缘变圆?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！