css卡片圆角样式,css图片的圆角效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

div css圆角边框怎么设置？除了用图片的方法以外还有其他方法吗？

1、css圆角实现的方式有很多种，最简单最方便的是使用border-radius属性。或者使用圆角图片。

2、border-radius后面直接接数值。

3、图片圆角就是事先切除圆角图片，可以制作定高，或者定宽的div。

4、使用border-radius的优点是无序添加多余结构代码，但是对于低版本的浏览器支持有问题。使用图片圆角不会有兼容问题，但是会多出多余的代码和结构。

相关问答

Q1: 如何使用css让图片显示圆角

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

代码实例：border-radius: 15px;

1、把下列代码添加进入你的style标签内

2、清空缓存，看看效果吧（部分IE版本可能不支持）

预览

总结

这是个很实用的方法，可以让图片看起来更「精巧」一些

Q2: 如何用CSS做圆角

方法一：CSS3

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

meta http-equiv="Content-Language" content="utf-8" /

meta name="robots" content="all" /

meta name="author" content="Tencent-ISRD" /

meta name="Copyright" content="Tencent" /

titleBorder-radius/title

/head

body

div style="border-width: 1px;border-style: solid;-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;padding:5px;"在Firefox和Safari 3的浏览器里能看到圆角效果/div

/body

/html

方法二：CSS2

先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。四个角使用绝对定位，定位在层的左上、右上、左下、右下位置。

Q3: 如何用CSS代码设定按钮的圆角样式？

用CSS代码设定按钮的圆角样式，这个在css3中才能实现，通过使用border-radius来实现这个效果，不过有浏览器的兼容性问题，-moz(例如 -moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px 15px 20px 25px;它的意思就是上的圆角5px，右的圆角15px，下的圆角20px，左的圆角25px，通过例子来实际看下：

div id="round"/div

#round {

padding:10px; width:300px; height:50px;

border: 5px solid #dedede;

-moz-border-radius: 15px; /* Gecko browsers */

-webkit-border-radius: 15px; /* Webkit browsers */

border-radius:15px; /* W3C syntax */

}

效果如图：

Q4: CSS实现底部弧度效果--卡片样式

使用了 CSS 的一些属性：

:after 伪类