html边框绕着图片,CSS 边框

CSS 边框

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面：宽度、样式，以及颜色。在下面的篇幅，我们会为您详细讲解这三个方面。

边框与背景

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”(例如，点线边框或虚线框)，元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

边框的样式

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示(当然，样式确实控制着边框的显示)，而是因为如果没有样式，将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

定义多种样式

您可以为一个边框定义多个样式，例如：

p.aside {border-style: solid dotted dashed double;}上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

我们又看到了这里的值采用了 top-right-bottom-left 的顺序，讨论用多个值设置不同内边距时也见过这个顺序。

定义单边样式

如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：

border-top-style

border-right-style

border-bottom-style

border-left-style

因此这两种方法是等价的：

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

html边框绕着图片,CSS 边框相关推荐

Html中的边框弧边,CSS边框属性一---border-radius
1.CSS outline 属性 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. p { outline:#00FF00 dotted thick; } ...
如何给照片加边框？图片加边框的3个实用方法
分享3个良心好用的照片加相框工具,个个都是操作简单,还提供了丰富好看的边框模板,瞬间让照片变得有质感,大家可以根据自己的需求选择对应的工具进行添加. 1.改图鸭一个免费的图片处理网站,提供几十种图片 ...
css里外边框与内边框_基本CSS边框
css里外边框与内边框 Every HTML element can be provided with a basic border via CSS, using one of 10 styles: ...
html边框背景图片,css3 边框、背景、文本效果的实现代码
一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...
在html中怎样调节边框的长度,CSS边框长度控制功能的实现
以前需要边框长度比容器小一些时,我用div嵌套.后来发现伪类在实现这个效果时很方便,只需要一个div就够了,另外调整padding和margin都不会很麻烦. border top border le ...
html列表边框有弧度,CSS边框带弧度代码怎么写
这篇文章主要为大家详细介绍了CSS边框带弧度代码怎么写,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 不少的时候看到别人的网站的框架很好看,边框都带有一定的弧度 ...
android给图片加边框,android 图片加边框 ImageView border 成效
android 图片加边框 ImageView border 效果 1.布局文件 res/layout/some_page.xml android:id="@+id/respImageBor ...
html图片离边框有距离,CSS边框：距离对象边缘？
我从来没有遇到任何类似于这样的财产,所以我不得不说,简而言之,"不". 但后来我觉得不好,所以我真的可以建议的是将你想要缝合的div包裹在另一个div中,并用相同的背景颜色来设计父 ...
html设置边框dw,Dreamweaver Css边框属性
文章来源:清风网络 http://www.vipcn.com 使用"CSS 样式定义"对话框的"边框"类别可以定义元素周围的边框的设置(如宽度.颜色和样式). ...

html边框绕着图片,CSS 边框

html边框绕着图片,CSS 边框相关推荐

最新文章

热门文章