有没有CSS样式可以实现图片圆角?
发布网友
发布时间：2022-04-27 04:20
我来回答
共3个回答
热心网友
时间：2022-04-06 12:56
还是先看最终效果图吧：
看到了吧，这就是用纯CSS实现的圆角化图片，为了能看到透明化的效果，我特意应用了一个背景图片，你可以下载本模型到你的电脑中，随意伸缩窗口的大小，看看外圆角是否是透明的。
有了这种效果，你再也不愁给每一张图片作圆角的工作，这种效果在一些图片类的演示页面中经常见到，特别适用那些图片比较多的列表中。怎么样，效果还可以吧！
好了，我们来看看它的实现机制吧！
实现原理：
这种效果其实就是我在第二章中变体实现，下面讲一讲主要的关键代码。
主要变化的还是背景图片的定位，只是这一次与第二章中的有些不同，这次需要考虑到下面的两个圆角的变化。
先看看上面两个圆角的实现：
/*图片偏移定位--上面部分*/
.sharp b.b2{background-position:-4pxtop;}
.sharpb.b3{background-position:-2px-1px;}
.sharpb.b4{background-position:-1px-2px;}
再看看下面两个圆角的样式设置，下面部分和上面部分是相互对应的。
/*图片偏移定位--下面部分*/
.sharpb.b7{background-position:-4pxbottom;}
.sharpb.b6{background-position:-2pxbottom;}
.sharpb.b5{background-position:-1pxbottom;}
不同的图片调用样式：
/*颜色方案一,绿色风格----------------------------------------*/
/*边框色*/
.color1 .b2,.color1 .b3,.color1.b4,.color1.b5,.color1 .b6,
.color1.b7,.color1.content{border-color:#262626;}
.color1.b1,.color1.b8{background:#262626;}
/*图片路径*/
.color1 .b2,.color1 .b3,.color1.b4,.color1h3,.color1.b5,.color1.b6,.color1.b7,.color1.content{background:url(image/1.jpg)no-repeat;}
前面两句共同构成边线框的颜色值，需要设置成同一个色值，后面的一句设置图片的调用路径。
三句话就搞定一种颜色方案了。
热心网友
时间：2022-04-06 14:14
要是要实现完全兼容的圆形就用楼上那位的做法吧，不过他是要添加别的代码实现的。
如果可以用圆角边框来代替，就用css3的效果来兼容chrome ff等
border-radius
-moz-border-radius
-khtml-border-radius
-webkit-border-radius
这些属性都要设置，并且要设置border属性，让它形成一个边框
否则就是IE的滤镜，应该是有这个滤镜的
热心网友
时间：2022-04-06 15:49
border-radius
-moz-border-radius
-khtml-border-radius
-webkit-border-radius
但ie都不支持
参考资料：cjl
css实现 圆角的 几种方法
在CSS中，实现圆角的方法有多种，每种方法都有其适用的场景和灵活性。首先，最直接的方式是通过书写简单的CSS代码，例如设置`border-radius`属性，如`border-radius: 4px;`。如果你想对角线圆度有所不同，可以分别指定每个角的半径，如`border-radius: 4px 4px 3px 3px`，顺序为左上、右上、右下...
css实现圆角的几种方法是什么?
有四种方法可以实现圆角。第一、直接写CSS代码：border-radius第二、四个圆角贴图；制作四个圆角的图片，然后用css定义第三、直接制作整个圆角矩形背景第四、定义12个背景色：左上角4个，右上角4个，右下角4个，左下角4个。
如何用css制作图片自动圆角,谢谢了!
1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入css代码：img { border-radius: 20px}。3、浏览器运行index.html页面，此时页面插入的图片会自动显示圆角20px的。
如何使用css让图片显示圆角
CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。代码实例：border-radius: 15px;1、把下列代码添加进入你的标签内 2、清空缓存，看看效果吧（部分IE版本可能不支持...
黄油相机怎么把照片变成圆角
首先，打开黄油相机，选择你想要编辑的照片。在编辑界面中，找到HTML元素，通过设置img标签的src属性，指定你照片的路径。接着，进入CSS部分，运用border-radius属性赋予图片圆角效果，设置其值为50%即可让图片变为圆形。为了更好地控制图片的尺寸和位置，你需要创建一个包含图片的容器。使用div标签，设定其...
如何使用CSS+DIV或者jsp实现任意一张图片让它以圆角的样子显示?
嗯。用CSS3 可以实现盒子模型的圆角。例如（border-radius: 8px; 表示8px 圆角半径）至于图片的话，要JS/JQ处理了。-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;各浏览器兼容、 CSS3 盒子圆角。
如何用CSS为图片添加精美圆角外边框
首先根据实现图片的大小制作一个圆角边框。打开PS，新建一空白文档，文档的大小根据需要情况来定，在此小编将其设置为400*400,设置完成后点击”好“按钮。选择工具栏上的”矩形“工具，在属性面板中将其半径设置为”20像素“，然后在绘图区绘制一个圆角矩形。在该图层的空白区域右击，选择”栅格化图层“，...
css圆角是怎样实现的
纯CSS实现圆角：这个就比较不方便，，需要用到CSS中的边框来实现。我就给出一段代码，你看看。HTML如下： 这是圆角内的内容 CSS如下：.item{margin:0 10px;padding:0; //这里只做常规设置，按照你的需要!} .item p{border:1px solid #000;border-top-width:0; //上面没有边框...
css的圆角代码是什么
图片的话需要用PS做成圆角 不过纯CSS也可以做出圆角效果 给个代码参考下 CSS圆角 body { background:fff;font-family:"Lucida Grande",Helvetica,Arial,sans-serif;font-size:11px;} container {background:#d8d8ee;width:600px;margin:15px;padding:20px;} .xsnazzy h1,.xsnazzy h2,.x...
div css圆角边框怎么设置?除了用图片的方法以外还有其他方法吗?
1、css圆角实现的方式有很多种，最简单最方便的是使用border-radius属性。或者使用圆角图片。2、border-radius后面直接接数值。3、图片圆角就是事先切除圆角图片，可以制作定高，或者定宽的div。4、使用border-radius的优点是无序添加多余结构代码，但是对于低版本的浏览器支持有问题。使用图片圆角不会有...
