css加边框，CSS边框
大家好，如果您还对css加边框不太了解，没有关系，今天就由本站为大家分享css加边框的知识，包括CSS边框的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
css如何给图片加上边框示例
css的应用十分广泛,即便用在图片的效果中也是方法多样，下面就介绍五种为图片添加特殊效果边框的CSS写法
阴影效果
通过使用带有一些padding之的背景图来添加阴影效果。
HTML<img class=”shadow” src=”sample.jpg” alt=”"/>CSS
img.shadow{
background: url(shadow-1000×1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框
HTML<img class="double-border" src="sample.jpg" alt=""/>CSS
img.double-border{
border: 5px solid#ddd;
padding: 5px;
background:#fff;
}
图片外框效果
webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考这篇教程。
HTML<div class="frame-block">
<span> </span>
<img src="sample.jpg" alt=""/>
</div>CSS
.frame-block{
position: relative;
display: block;
height:335px;
width: 575px;
}
.frame-block span{
background: url(frame.png) no-repeat center top;
height:335px;
width: 575px;
display: block;
position: absolute;
}
水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印
HTML<div class="transp-block">
<img class="transparent" src="sample.jpg" alt=""/>
</div>CSS
.transp-block{
background:#000 url(watermark.jpg) no-repeat;
width: 575px;
height: 335px;
}
img.transparent{
filter:alpha(opacity=75);
opacity:.75;
}
为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
HTML<div class="img-desc">
<img src="sample.jpg" alt=""/>
<cite>Salone del mobile Milano, April 2008- Peeta</cite>
</div>CSS
.img-desc{
position: relative;
display: block;
height:335px;
width: 575px;
}
.img-desc cite{
background:#111;
filter:alpha(opacity=55);
opacity:.55;
color:#fff;
position: absolute;
bottom: 0;
left: 0;
width: 555px;
padding: 10px;
border-top: 1px solid#999;
css怎么给文字加边框
css给文字加边框的方法：首先创建一个HTML示例文件；然后在body中定义文字内容；最后通过“border: medium solid red”样式给文字加边框即可。
本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
css给文字加边框：
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
下面我们来看一下使用css给文字加边框的方法：
css可以通过border属性给文字加边框。
border简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-widthborder-styleborder-color
属性值：
border-width规定边框的宽度。
border-style规定边框的样式。
border-color规定边框的颜色。
inherit规定应该从父元素继承 border属性的设置。
示例：
<html><head><style type="text/css">p{border: medium solid red}</style></head><body><p>文字边框</p></body></html>
【推荐学习：css视频教程】
div css圆角边框怎么设置
css3有一种新功能就是给div或者是图片等圆角，圆角代码怎么写你知道吗，作为一个经常写css的网站制作者，今天跟大家分享一下css圆角边框代码，当然图片圆角也是一样的，我分享的代码尽量兼容各种浏览器，包括ie、360浏览器、百度浏览器、谷歌浏览器等
方法/步骤
1.css代码：
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid#000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
}
-moz-border-radius: 15px;-webkit-border-radius: 15px;这两个是为了兼容其他一些不常用浏览写的css圆角代码
html代码：
<div class="yj">这个div四个角都圆15px;</div>
结果如下：
2.图片圆角也是一样的：
css代码：
.yj{-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;}
html代码：
<img src="xp.jpg" width="100px" height="100px;" class="yj"/>
3.css3圆角代码也支持上下左右的：
css代码这么写：
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid#000000;
-moz-border-radius: 0px 0px 20px 25px;;
-webkit-border-radius: 0px 0px 20px 25px;;
border-radius:0px 0px 20px 25px;;
}
4.圆角代码也支持拆分的（四个边框都圆角10px的拆分css代码如下）：
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
border-bottom-left-radius: 10px;
关于css加边框和CSS边框的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。