CSS样式如下 ,设置了圆角后,再设置阴影在Div层的4个角会出现黑点,怎样吧黑点去掉并保持效果,求指点

html-css040

CSS样式如下 ,设置了圆角后,再设置阴影在Div层的4个角会出现黑点,怎样吧黑点去掉并保持效果,求指点,第1张

圆角和阴影本身就是CSS3的属性 如果你在支持CSS3的浏览器上直接用圆角属性就可以了 然后在加阴影就不会出现这样的问题

而不支持CSS3属性的浏览器你圆角是用图片模拟出来的 那么他也没有阴影的属性 所以也不会出现这样问题

所以你的问题就是给弄混了

在支持CSS3的浏览器上用自身的属性

在不支持CSS3的浏览器上用模拟的方法

还有在IE系列下你可以下一个CSS3的.HTC文件 他用微软自带的VML语法模拟出CSS3效果 具体的你可以百度

圆角、阴影、渐变这些属性在各个浏览器的兼容效果都不是很好,渐变就更不容易了,我们通常都是用作图软件来实现(通常也很好实现)

兼容不好为什么还会有这些属性呢?

目前来说,低版本的浏览器的兼容效果都不是很好,高版本的浏览器都会实现不同的兼容效果,所以,存在有他的意义,在未来随着用户的需求越来越多,就会使用的越来越多,浏览器的兼容会变得越来越好,就类似W3C标准的出现一样。

两种效果 一种是把图片做成大的背景

但是这样有局限性 因为这样它不会根据页面的变化而变化了

另一种方法是我推荐的方法

把底部圆角那儿切出来叫top.jpg

底部叫foot.jpg

中间的叫bg.jpg

<div style=" background:url(这里是bg.jpg) repeat-y left top">

<div>这里放head.jpg图片</div>

<div>这里就是你想要写的内容随便放什么都可以的</div>

<div>这里放foot.jpg图片</div>

</div>

这样的效果你看下吧 肯定是最简单最方便实现你现在这种效果的

而且会根据内容的大小而变化。

另一种

文本框用input,<input type="text" class="txtnput" value=""/>

.txtnput{float: leftwidth:126pxheight:27pxbackground:url(图片路劲)border:none}

高度和宽度是你效果图中你需要的那种文本框的大小,背景图片也是你需要的那种框。

按钮也是一样的实现。