用css在IE7、8上实现圆角

一、前段时间做了一个有网页里面有圆角的效果，使用的是border-radius：50%，但是检测兼容时发现在IE7/8等远古版本不支持border-radius的百分比显示，无奈只能用图片替换了。

但是作为一个前端，能用css解决的图片，都应该用css解决

二、使用css兼容IE7/8实现圆角效果

因为border-radius在IE7/8不支持百分比显示，所以我们只能使用另外一种方法了，利用border-style中的dotted，做出像是border-radius：50%的效果:

并且也在样式中添加 border-radius：50%，这样也可以兼容IE9及以上浏览器；

html代码：

css样式如下：

时间： 2024-11-02 03:31:40

用css在IE7、8上实现圆角的相关文章

使用 CSS 去掉 iPhone 网页上按钮的默认圆角样式

使用 CSS 去掉 iPhone 网页上按钮的默认圆角样式 使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角的样式,显得超级恶心,但是我们自己定义 border-radius 也没有效果,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式. input {-webkit-appearance:none; /*去除input默认样式*/} input[type="submit"], input[type=

用HTML和CSS实现WWDC 2015上的动画效果

用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015 原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年,苹果都会召开一次重大的会议.WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会. 每一年的这个时候,他们都会制造出很多新创意,今年,我被一个用简单圆圈和形状制作出来的图标所惊艳,于是我决定用HTML和CSS来实现它. WWDC 15邀请卡 苹果的

DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" /> 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如 margin-left:10px !important;; margin-left:5px; +height:120px

CSS从大图片上截取小图标的操作_CSS精灵

1.编程思想在于:          使用background-position属性(设置背景图像的起始位置).这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始. 2.CSS基础介绍: 1.如何定位背景图像: body { background-image:url('bgimage.gif'); background-repeat:no-repeat; background-attachment:fixed; background-p

只用css来美化的上传表单按钮（抄的迅雷的）

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>文件上传</title><link href="css/reset.css" rel="stylesheet" type="text/css"><style type="text/css">.wei

iOS上实现圆角图片

UIImageView自带 //圆角设置 imageView.layer.cornerRadius = 8;(值越大,角就越圆) imageView.layer.masksToBounds = YES; //边框宽度及颜色设置 [imageView.layer setBorderWidth:2]; [imageView.layer setBorderColor:[UIColor blueColor]]; //设置边框为蓝色 //自动适应,保持图片宽高比 imageView.contentMode

20.CSS盒模型【上】

第十六章  CSS盒模型[上] 一.元素尺寸 属性                   值                    说明              CSS版本 1.width          auto.长度值或百分比     设置元素的宽度            1 2.height         auto.长度值或百分比     设置元素的高度            1 3.min-width      auto.长度值或百分比     设置元素最小宽度          2

使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式

使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角的样式,显得超级恶心,但是我们自己定义 border-radius 为 0 也无法去除这个圆角,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式. 我们只要对按钮设置这个属性,并设置为 ‘none’ 就可以取消浏览器对于控件的默认样式. input {-webkit-appearance:none; /*去除input默认样式*/} 另外这个属性也有个神奇的地方,

使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式

使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角且颜色由上而下渐变的样式,显得超级恶心,而且文本框也会有一定的圆角,但是我们自己定义 border-radius 也没有效果,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式.此时的解决办法为: input[type=submit],input[type=reset],input[type=button],input[type=text]{-webkit-appe