如何使用css让图片显示圆角
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用css让图片显示圆角相关的知识，希望对你有一定的参考价值。
一般的照片都是方形的，有什么办法可以让照片在显示的时候显示成圆角呢？
miya22，你这个是让背景变成角。
我需要在图片上放角才能遮盖图片。
还是多谢你了。
CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
代码实例：border-radius: 15px;
1、把下列代码添加进入你的<style>标签内
2、清空缓存，看看效果吧（部分IE版本可能不支持）
预览
总结
这是个很实用的方法，可以让图片看起来更「精巧」一些
参考技术A 使用css让图片显示圆角，首先需要理解，一般图片都是用一个div包裹，不一定要直接去改图片，可以去直接改包裹图片的div，圆角的话，是需要使用css3才能实现的border-radius来实现的，border-radius:5px 15px 20px 25px;顺序依次是上右下左，具体可以看下代码：<html><head>
<style>
#round
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
</style>
</head>
<body>
<div id="round">
<img src='图片地址'>
</div>
</body>
</html> 参考技术B img
-moz-border-radius:20px;
gecko浏览器支持本回答被提问者采纳 参考技术C 都是做的圆角矩形吧 css有这功能？ 参考技术D 内容比较长～我就不贴出来了～
给你个网址吧。 http://www.mb5u.com/divcssjiaocheng/13833.html
css如何让两个容器并排显示
左右两个box，宽度和高度自适应，所以右边的没有固定宽度和高度。
当右边文字变多时，高度超过左边图片，会自动串到左边图片下方。
我如何让右边高度变高后，仍然保持在右边位置上？
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#personal_info
height:100px;
width:100%;
clear:both;
#profile_img
float:left;
height:90px;
width:90px;
border:1px solid #333;
margin-left:4px;
margin-top:4px;
clear:right;
#profile_info
float:left;
margin-left:10px;
margin-bottom:10px;
#profile_name
float:left;
clear:right;
margin-top:5px;
margin-bottom:5px;
width:80px;
font-size:16px;
font-weight:bold;
#profile_status
clear:both;
margin-right:10px;
margin-bottom:5px;
#profile_time
color:#999;
margin-bottom:5px;
clear:both;
</style>
<body>
<div id="personal_info">
<div id="profile_img"><img src="img/user/user_test.jpg"></div>
<div id="profile_info">
<div id="profile_name">张三</div>
<div id="profile_status">很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字</div>
<div id="profile_time">显示时间</div>
<div id="profile_wen">另一段文字</div>
</div>
</div>
</body>
</html>
我这个页面需要宽度自适应，所以右侧div是不要宽度的，而且右侧居右的话，里面内容默认都居右了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div,imgborder:1px;border:red solid;margin:0px; /*此行可删除*/
#personal_info
margin:0 auto;
height:100%;
border-color:red;
width:910px;
height:100%;
clear:both;
#profile_img
float:left; /*控制此DIV居左*/
height:90px;
width:90px;
border:1px solid #333;
clear:right;
img margin-left:4px;margin-top:4px; /*另行控制图片*/
#profile_info
width:800px;
float:right; /*控制此DIV居右*/
margin-left:10px;
#profile_name
float:left;
clear:right;
margin-top:5px;
margin-bottom:5px;
width:100%;
font-size:16px;
font-weight:bold;
#profile_status
width:100%;
clear:both;
margin-bottom:5px;
#profile_time
width:100%;
color:#999;
margin-bottom:5px;
clear:both;
#profile_wen
width:100%;
clear:both;
</style>
<body>
<div id="personal_info">
<div id="profile_img"><img src="D:\桌面\http_imgload-.jpg"></div>
<div id="profile_info">
<div id="profile_name">张三</div>
<div id="profile_status">很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的
文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很
长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文
字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长
的文字很长的文字很长的文字很长的文字很长的
</div>
<div id="profile_time">显示时间</div>
<div id="profile_wen">另一段文字</div>
</div>
</div>
</body>
</html> 参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style>
div,imgborder:1px;border:red solid;margin:0px; /*此行可删除*/
#personal_info
margin:0 auto;
height:100%;
border-color:red;
width:910px;
height:100%;
clear:both;
#profile_img
float:left; /*控制此DIV居左*/
height:90px;
width:90px;
border:1px solid #333;
clear:right;
img margin-left:4px;margin-top:4px; /*另行控制图片*/
#profile_info
width:800px;
float:right; /*控制此DIV居右*/
margin-left:10px;
#profile_name
float:left;
clear:right;
margin-top:5px;
margin-bottom:5px;
width:100%;
font-size:16px;
font-weight:bold;
#profile_status
width:100%;
clear:both;
margin-bottom:5px;
#profile_time
width:100%;
color:#999;
margin-bottom:5px;
clear:both;
#profile_wen
width:100%;
clear:both;
</style>
<body>
<div id="personal_info">
<div id="profile_img"><img src="D:\桌面\http_imgload-.jpg"></div>
<div id="profile_info">
<div id="profile_name">张三</div>
<div id="profile_status">很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的
文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很
长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文
字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长
的文字很长的文字很长的文字很长的文字很长的
</div>
<div id="profile_time">显示时间</div>
<div id="profile_wen">另一段文字</div>
</div>
</div>
</body>
</html>
DIV最好是加入宽度,高度可以不加.这样就比较容易控制. 参考技术B 并排的话，你需要使用CSS的float属性，然后在设置浮动；
比如
<div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:left;width:200px">右</div>
</div>
这样，这个两个DIV标签就在同一行上了（同时靠左），当然有个前提，就是他们俩的父元素的宽度要至少大于400px，这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白
<div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:right;width:200px">右</div>
</div>
以上写法，也是在同一行。不同的是，一个靠左，一个靠右。
这里边的两个DIV的中间有100PX的空白。 参考技术C 有几个问题楼主需要明确一下
1.浮动之所以能够浮动，是因为在浮动的元素之前的那个元素也设置了浮动，并且父元素刨去之前元素的宽度之外还有余下的宽度给后面的这个浮动元素，才能浮动成功。所以必须设置的几个东西是，父元素宽度、两个子元素宽度，和两个子元素浮动。
2.为了避免在火狐浏览器或者以后的布局中出现问题，在子元素浮动，父元素高度自适应的情况下，应该给父元素加入overflow:hidden;否则父元素高度无法展开，因为子元素浮动之后，脱离了父元素本身的普通文本流。
3.清除浮动，是浮动元素后面的元素清除上一个浮动元素影响自己布局的功能，切勿乱用。本回答被提问者采纳
以上是关于如何使用css让图片显示圆角的主要内容，如果未能解决你的问题，请参考以下文章