放马桶水箱专用卫生球_百度知道Web前端 点滴技巧（10）
先看最终图形效果：
主要的DOM就一个：
&div class=&disk& data-content=&0&&&/div&
看CSS，没考虑兼容性，但目前IE11，Chrome 46都没问题：
height:150
background:#
border-left:2px solid #
border-right:2px solid #
background: linear-gradient(to bottom,#efefef 100%,#ccc 0%);
.disk:before{
content: attr(data-content) '%';
height: 30
width: 100%;
border: 2px solid #
border-radius: 50%;
transform: rotateX(40deg);
background-color: #
text-align:
line-height: 1.5
.disk:after{
content: &&;
width:100%;
border:2px solid #
border-top:0
transform: rotateX(40deg);
background: linear-gradient(to bottom,rgba(239,239,239,0) 40%,#efefef 50%);
border-radius: 50%;
border-top-left-radius: 0
border-top-right-radius: 0
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
动态改变填充部分代码需要用jQuery和一个addRule的插件，因为要修改:after的样式，jQuery不支持目前
&script type=&text/javascript& src=&/libs/jquery/2.1.4/jquery.js&&&/script&
&script type=&text/javascript&&
* jquery.addrule.js 0.0.2 - /yckart/5563717/
* Add css-rules to an existing stylesheet.
* @see /a/0044
* Copyright (c) 2013 Yannick Albert ()
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
(function ($) {
window.addRule = function (selector, styles, sheet) {
styles = (function (styles) {
if (typeof styles === &string&)
var clone = &&;
for (var prop in styles) {
if (styles.hasOwnProperty(prop)) {
var val = styles[prop];
prop = prop.replace(/([A-Z])/g, &-$1&).toLowerCase(); // convert to dash-case
clone += prop + &:& + (prop === &content& ? '&' + val + '&' : val) + &; &;
}(styles));
sheet = sheet || document.styleSheets[document.styleSheets.length - 1];
if (sheet.insertRule) sheet.insertRule(selector + & {& + styles + &}&, sheet.cssRules.length);
else if (sheet.addRule) sheet.addRule(selector, styles);
if ($) $.fn.addRule = function (styles, sheet) {
addRule(this.selector, styles, sheet);
}(this.jQuery || this.Zepto));
下面看具体的修改逻辑：
&script type=&text/javascript&&
function add(val){
if(val == 0){
$(&.disk:after&).addRule({backgroundImage: &linear-gradient(to bottom, rgba(239, 239, 239, 0) 40%, #efefef 50%)&});
$(&.disk&).css({backgroundImage: &linear-gradient(to bottom, #efefef 100%, #ccc 0%)&});
else if(val & 0 && val &= 100){
$(&.disk:after&).addRule({backgroundImage: &linear-gradient(to bottom, rgba(239, 239, 239, 0) 40%, #ccc 50%)&});
$(&.disk&).css({backgroundImage: &linear-gradient(to bottom, #efefef & + (100-val) + &%, #ccc 0%)&});
$(&.disk&).attr('data-content',val);
有个网址是用CSS画各种图的集合：/examples/ShapesOfCSS/，有兴趣的自己可以看看，但没有这种简单的桶装图
==========================================================================
实际在项目中，没有用这种一个DOM的结构，因为这样虽然DOM结构简单了，但修改填充就麻烦了。可以用下面这种多个DIV结构，修改填充就简单点：
&div class=&disk-chart&&
&div class=&top&&&span&{{percentage}}%&/span&&/div&
&div class=&middle&&&/div&
&div class=&bottom&&&/div&
项目中的样子：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：198543次
积分：3790
积分：3790
排名：第6039名
原创：178篇
转载：19篇
评论：53条
(1)(16)(42)(13)(1)(1)(1)(1)(1)(1)(1)(1)(5)(1)(2)(8)(1)(2)(1)(3)(2)(1)(3)(3)(9)(39)(1)(1)(2)(1)(1)(1)(1)(2)(2)(18)(7)关于蚂蚁...为什么用卫生球给蚂蚁的周围画一个圈它就会呆在里面不出来了?
蛮小夜10235
因为蚂蚁是没有眼睛的,他们的行走是靠蚂蚁素(他们自己分泌的物体)和头上的触角但主要是靠分泌素来找路,用卫生球给蚂蚁的周围画一个圈和在白纸上画一个圆圈围绕蚂蚁会使他们找不到分泌素而在圈里饶来饶去~
为您推荐：
其他类似问题
我也试过在白纸上画一个圆圈围绕蚂蚁,现象和你差不多.应该是笔水和蚂蚁的细小.在我们看来笔水画出来的东西,好像就是平面,没有高度,但是在蚂蚁看来是这样吗?我想在它们看来是被笔水是挡住了它们.(以上是我个人的猜想)
扫描下载二维码古画用塑料整理箱保存可以吗?另外我放了干燥剂和卫生球.
█幽灵军团█瑀
千万不要放卫生球,味道严重影响古画的品质,而且也容易使色泽发生不可逆转的变化.另外,塑料整理箱虽然隔湿防潮,但透气性很差,也不是最理想的保存方式.建议：1.干燥剂可以用,但是最好选用高分子干燥剂（如硅胶干燥剂）,性质稳定,不会影响古画；2.到中药店购买一些除潮防虫的草药,还可以使古画具有沁人心脾的清香,更加具有古韵和文化气息；3.最好选择硬木木箱（有古玩专用箱卖,但是贵了点）,如红木（有些贵重）、水曲柳（物美价廉）等作为盛器,透气防蛀,更有利于古画的保存!其实,我们很羡慕你能拥有古字画,好好保存吧!
为您推荐：
其他类似问题
扫描下载二维码祥康偏方大全1
祥康偏方大全1
发表评论：
馆藏&10950
TA的最新馆藏}