css边框是什么形状?

html-css09

css边框是什么形状?,第1张

这是哪个奇葩的面试官,太简单了吧,边框可以有5种形状(以CSS3为标准)

正常情况下,边框为长方形正方形,例如border:1px solid #eee

但是CSS3引入了新的属性border-radius后,可以将边框定义为圆角边框或者圆形边框以及不规则圆形边框.

具体形状要看长宽与border-radius所赋的值

首先,楼上说得很对,你之所以出现图片抖动的原因是因为,border变为2px的时候,整个盒子的width和height都变了,浏览器对整个排版会重新解析,导致这个盒子和出现一些挤压。

细说一下,浏览器对盒模型的解析,会影响盒子的width宽度、height高度的属性有边框(border)、内补丁(padding)、外补丁(margin)。显然一个盒子真实宽度=width+border*2+margin*2;真实高度=height+border*2+margin*2;而padding是只会影响内容的编排,

举例说明,我定义了一个宽度高度都是100px的div,margin,border,padding都是10px;最后在火狐的视图下看和模型,浏览器的解析结果是120px,如图所示:

<div style="width:100pxheight:100pxborder:10pxmargin:10pxpadding:10px"></div>

总言之,为了防止你出现图片的抖动,主要就是要达到鼠标放上去之后的盒子的总宽度和总高度是不变的才行:

所以我的意见是:

<style type="text/css">

#box{width:100pxheight:100pxborder:1px solid #ccc}

#box:hover{width:98pxheight:98pxborder:2px solid #ccc}

</style>

<div id="box"></div>

   你可以试一下,不懂欢迎再和我探讨……

border-radius:像素

CSS3里面 这个是圆角属性,但是最主流的IE浏览器都不认识,所以LZ还是放弃吧。

处理圆角一般采用两种方式

1、一个是PS切圆角,然后作为背景图片放到页面中。

2、第二个就是采用一个累计效果,也可以定义出圆角。

这里有个例子:http://zhidao.baidu.com/question/128969067.html

下面也有我的回答,LZ感兴趣可以研究研究,很简单。