css 空心圆

用css实现一个空心圆,并始终放置在浏览器窗口左下角
        div{
                position:fixed;
                bottom:0;
                left:0;
                width:100px;
                height:100px;
                border:2px solid #000;
                border-radius:100px;
}
        如何让圆水平,垂直居中
        div{
                position:fixed;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                width:100px;
                height:100px;
                border:2px solid #000;
                border-radius:100px;
}
IE7以下不支持position:fixed;的bug

1. 利用 Javascript 计算出需要的 top 值
<!--[if IE lt 7]>
<link rel="stylesheet" href="style.css" type="text/css" />
<![endif]-->
在style.css样式表中针对目标定位元素样式中写入:
position:absolute;
top:expression(eval(document.body.scrollTop + 50));
防止滚动条滚动时的闪动,需要定义HTMl的属性为:
html {
    background-image: url(about: blank); /*用浏览器空白页面作为背景*/
    background-attachment: fixed; /*确保滚动条滚动时,元素不闪动*/
}
在 IE 中特有的 CSS 运算符 expression中我们可以利用 Javascript 计算出需要的 top 值,这样就达到了与 position: fixed 同样的效果。
2.利用容器对溢出内容的处理方式来实现
定义body内外边距为0,实现html和浏览器窗口相同大小,使body出现滚动条,元素相对于html相对定位。
body { padding: 0; margin: 0; }
html { overflow: hidden; }
body { height: 100%; overflow: auto; }
针对IE6定义元素属性:
position: absolute;
top: 50% ;
left: 50% ;
margin-top: -140px;
margin-left: -168px;
让元素固定于浏览器
分别让元素定位于浏览器左侧、右侧、顶部、底部综合样式演示:
position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop));/* IE6 头部固定 */

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)0)-(parseInt(this.currentStyle.marginRight, 10)0));/* IE6 固定右侧 */

position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)0)-(parseInt(this.currentStyle.marginBottom, 10)0)));/* IE6 固定底部  */

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft));/* IE6 左侧固定 */

时间: 2024-10-23 09:48:18

css 空心圆的相关文章

用css实现一个空心圆,并始终放置在浏览器窗口左下角

用css实现一个空心圆,并始终放置在浏览器窗口左下角         div{                 position:fixed;                 bottom:0;                 left:0;                 width:100px;                 height:100px;                 border:2px solid #000;                 border-radius:

html基础 无序列表ul li 项目符号的类型 type 小黑点disc 空心圆circle 实心方块sqaure

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

html5 &lt;canvas&gt;第二篇 strokeRect strokeStyle() strokeStyle() createLinearGradient addColorStop 用法 实心圆,空心圆,渐变

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <link href="css.css" rel="stylesheet" type="text/css

Photoshop 画空心圆

1. 本文涉及的基础点 1.如何拉参考线? 2.Shift按键固定宽高比 3.Alt按键从中心出发 3.选区相减 2.具体操作 打开参考线(Ctrl-R),从上面参考线拉根线到中心,从左边拉根参考线到中心: 选择椭圆选框工具(M),同时按住ALT+SHIFT键就可以画一个以一个圆心的正圆.这点我之前一直不知道,之前最多知道shift可以画圆,不知道alt的作用. 再把鼠标移到中心点先按ALT键,按下鼠标轻拖,接着松开ALT键再按下,再按SHIFT键,这时拖拉鼠标,就可以画出空心圆的选区了. 这里

css画圆

用css3的border-radius属性右上角的1/4个圆border-top-right-radius:100%;左上角的1/4个圆圈border-top-left-radius:100%右下角的1/4个圆border-bottom-right-radius:100%;左下角的1/4个圆圈border-bottom-left-radius:100% 圆则是50%:

iOS空心圆下载进度指示器控件

self.layer = [CAShapeLayer layer]; self.layer.frame = CGRectMake(0, 0, 100, 100); self.layer.position = self.view.center; self.layer.lineWidth = 10.0; self.layer.fillColor = [UIColor clearColor].CGColor; self.layer.strokeColor = [UIColor lightGrayCol

Echarts设置折线连接点样式(默认空心圆)

设置series : [ {symbol:'circle'}]支持的类型ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 自由挑选 原文地址:http://blog.51cto.com/zl0828/2156924

echarts空心圆 中间带统计 自定义样式

let option = { color:['#FFD700','#00CED1','#32CD32','#1E90FF'], //环形颜色 tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, graphic: [{ type: 'text', top: '48%', left: 'center', style: { text: '2888', fontSize: '0.6rem cursive', text

css一些常用的属性

背景关联 background-attachment 属性body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; } CSS 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 把图像设置