为什么css定位合成图都要以负号开头

html-css040

为什么css定位合成图都要以负号开头,第1张

估计你说的 是css sprite (雪碧图),(1)正常来说 定位坐标是以 合成图片 左上角这个点作为原点(0px,0px)开始读取的, 而你的图片全都在坐标系的 第四象限 background-position: x y;(x,y为数值或百分比)第一个值是水平位置,第二个值是垂直位置。来定位图片的 那么x是正的,y 是负值。

(2)至于你说的--以负值开头这种情况: 多半是你用在线生成器 生成雪碧图片,那么自带生成的 css 定位里边依据生成器内部定义的坐标系 那便有负值产生了--

ps: 以上是个人理解,相互学习

使用纯css制作扇形图,合并起来形成饼图:

应该知道css3中引入了圆角属性(border-radius),一旦设置这个值,边框即会出现圆角。同样,我们对正方形设置圆角,即可得到饼状图

html:<div id="circle">11</div>

css:

#circle{

width:0

height:0

border-radius:100px

border-width:100px

border-style:solid

border-color: red blue green yellow

line-height:99em

overflow:hidden

cursor:pointer

margin: 30px auto

}

效果:

4.同样我们对其中三个边框设置透明色即可得到扇形

html:<div id="fan">11</div>

css:

#fan{

width:0

height:0

border-radius:100px

border-width:100px

border-style:solid

border-color:red transparent transparent transparent

line-height:99em

overflow:hidden

cursor:pointer

margin: 30px auto

}

效果: