• CSS常用样式整理


    元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器。

    浏览器渐变背景颜色:

    FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE789*/
    background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);/*火狐*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));/*谷歌*/
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);/*IE1011*/
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);/*IE1011*/
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);/*IE1011*/
    View Code

    IE6支持fixed

    #top{ position:fixed; _position:absolute; bottom:0; right:20px; _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))); }
    View Code

    right 跟 left 属性可以用绝对定位的办法解决,而 top 跟 bottom 就需要用上面的表达式来实现。其中在 _position:absolute; 中的 _ 符号只有 IE6 才能识别

    input皮肤设置常用样式

    input[type=text]
    {
        border:1px solid #8C8C8C;   
       }
    input[type=text]:hover
    {
        border:1px solid #5E5E5E;   
       }
       input[type=text]:focus 
    {
        border:1px solid #247CC0;   
       }
    View Code

     为元素设置边框阴影

    -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
    box-shadow:2px 2px 10px #909090;/*opera或ie9*/
    box-shadow:inset 0 2px 5px #e3e3e3;/*文本框内阴影*/

    第一个参数是x轴阴影段长度 第二个参数是y轴阴影段长度 第三个参数是往四周阴影段长度 第四个参数是阴影段颜色

    页面空间元素显示圆角样式

    border-radius: 3px 3px 3px 3px;

    文本框内阴影设置

    box-shadow:inset 0 2px 5px #e3e3e3; /*文本框内阴影*/

     input常用样式

      input[type=text],input[type=password],select,textarea{ border:1px solid #8C8C8C; box-shadow:inset 0 2px 5px #e3e3e3; border-radius: 3px 3px 3px 3px;}
      input[type=text]:hover,input[type=password]:hover,select:hover,textarea:hover{border:1px solid #5E5E5E;}
      input[type=text]:focus,input[type=password]:focus,select:focus,textarea:focus{border:1px solid #247CC0; -moz-box-shadow: 2px 2px 10px #909090;-webkit-box-shadow: 2px 2px 10px #909090;box-shadow:2px 2px 10px #909090;}

    兼容IE样式

      input[type=text],input[type=password],select,textarea 
            {
                border:1px solid #8C8C8C;            
                padding-left:10px;
                line-height:25px; 
                height:25px; 
                width:300px;
                box-shadow:inset 0px 2px 5px #e3e3e3;
                -webkit-box-shadow:inset 0px 2px 5px #e3e3e3;
                -moz-box-shadow: inset 0px 2px 5px #e3e3e3;
                filter:shadow(color=#666666, direction=135, strength=1) progid:DXImageTransform.Microsoft.Blur(pixelRadius=2, direction=135);
                border-radius: 3px;
                behavior: url(../../App_Css/border-radius.htc);
             }
        input[type=text]:hover,input[type=password]:hover,select:hover,textarea:hover{border:1px solid #5E5E5E;}
        input[type=text]:focus,input[type=password]:focus,select:focus,textarea:focus
        {
            border:1px solid #247CC0;
            -moz-box-shadow: 2px 2px 10px #909090;
            -webkit-box-shadow: 2px 2px 10px #909090;
            box-shadow:2px 2px 10px #909090;
            filter:shadow(color=#666666, direction=135, strength=1) progid:DXImageTransform.Microsoft.Blur(pixelRadius=2, direction=135);
        }

    IE678对于圆角设置常常不支持,借助ie-css3.htc实现兼容。赋值一下代码贴入新建ie-css3.htc文件,页面引用 behavior: url(../../App_Css/border-radius.htc);

    --Do not remove this if you are using--
    Original Author: Remiz Rahnas
    Original Author URL: http://www.htmlremix.com
    Published date: 2008/09/24
    
    Changes by Nick Fetchak:
    - IE8 standards mode compatibility
    - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
    - Added partial support for 'box-shadow' style
    - Checks for VML support before doing anything
    - Updates VML element size and position via timer and also via window resize event
    - lots of other small things
    Published date : 2010/03/14
    http://fetchak.com/ie-css3
    
    Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter
    
    <public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" />
    <script type="text/javascript">
    
        timer_length = 200; // Milliseconds
        border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues
    
    
        // supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
        function supportsVml() {
            if (typeof supportsVml.supported == "undefined") {
                var a = document.body.appendChild(document.createElement('div'));
                a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
                var b = a.firstChild;
                b.style.behavior = "url(#default#VML)";
                supportsVml.supported = b ? typeof b.adj == "object" : true;
                a.parentNode.removeChild(a);
            }
            return supportsVml.supported
        }
    
    
        // findPos() borrowed from http://www.quirksmode.org/js/findpos.html
        function findPos(obj) {
            var curleft = curtop = 0;
    
            if (obj.offsetParent) {
                do {
                    curleft += obj.offsetLeft;
                    curtop += obj.offsetTop;
                } while (obj = obj.offsetParent);
            }
    
            return ({
                'x': curleft,
                'y': curtop
            });
        }
    
        function createBoxShadow(element, vml_parent) {
            var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || '';
            var match = style.match(/^(d+)px (d+)px (d+)px/);
            if (!match) { return (false); }
    
    
            var shadow = document.createElement('v:roundrect');
            shadow.userAttrs = {
                'x': parseInt(RegExp.$1 || 0),
                'y': parseInt(RegExp.$2 || 0),
                'radius': parseInt(RegExp.$3 || 0) / 2
            };
            shadow.position_offset = {
                'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),
                'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)
            };
            shadow.size_offset = {
                'width': 0,
                'height': 0
            };
            shadow.arcsize = element.arcSize + 'px';
            shadow.style.display = 'block';
            shadow.style.position = 'absolute';
            shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) + 'px';
            shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) + 'px';
            shadow.style.width = element.offsetWidth + 'px';
            shadow.style.height = element.offsetHeight + 'px';
            shadow.style.antialias = true;
            shadow.className = 'vml_box_shadow';
            shadow.style.zIndex = element.zIndex - 1;
            shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius=' + shadow.userAttrs.radius + ',makeShadow=true,shadowOpacity=' + element.opacity + ')';
    
            element.parentNode.appendChild(shadow);
            //element.parentNode.insertBefore(shadow, element.element);
    
            // For window resizing
            element.vml.push(shadow);
    
            return (true);
        }
    
        function createBorderRect(element, vml_parent) {
            if (isNaN(element.borderRadius)) { return (false); }
    
            element.style.background = 'transparent';
            element.style.borderColor = 'transparent';
    
            var rect = document.createElement('v:roundrect');
            rect.position_offset = {
                'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,
                'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x
            };
            rect.size_offset = {
                'width': 0 - element.strokeWeight,
                'height': 0 - element.strokeWeight
            };
            rect.arcsize = element.arcSize + 'px';
            rect.strokeColor = element.strokeColor;
            rect.strokeWeight = element.strokeWeight + 'px';
            rect.stroked = element.stroked;
            rect.className = 'vml_border_radius';
            rect.style.display = 'block';
            rect.style.position = 'absolute';
            rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) + 'px';
            rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) + 'px';
            rect.style.width = (element.offsetWidth + rect.size_offset.width) + 'px';
            rect.style.height = (element.offsetHeight + rect.size_offset.height) + 'px';
            rect.style.antialias = true;
            rect.style.zIndex = element.zIndex - 1;
    
            if (border_opacity && (element.opacity < 1)) {
                rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + parseFloat(element.opacity * 100) + ')';
            }
    
            var fill = document.createElement('v:fill');
            fill.color = element.fillColor;
            fill.src = element.fillSrc;
            fill.className = 'vml_border_radius_fill';
            fill.type = 'tile';
            fill.opacity = element.opacity;
    
            // Hack: IE6 doesn't support transparent borders, use padding to offset original element
            isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
            if (isIE6 && (element.strokeWeight > 0)) {
                element.style.borderStyle = 'none';
                element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight;
                element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight;
            }
    
            rect.appendChild(fill);
            element.parentNode.appendChild(rect);
            //element.parentNode.insertBefore(rect, element.element);
    
            // For window resizing
            element.vml.push(rect);
    
            return (true);
        }
    
        function createTextShadow(element, vml_parent) {
            if (!element.textShadow) { return (false); }
    
            var match = element.textShadow.match(/^(d+)px (d+)px (d+)px (#?w+)/);
            if (!match) { return (false); }
    
    
            //var shadow = document.createElement('span');
            var shadow = element.cloneNode(true);
            var radius = parseInt(RegExp.$3 || 0);
            shadow.userAttrs = {
                'x': parseInt(RegExp.$1 || 0) - (radius),
                'y': parseInt(RegExp.$2 || 0) - (radius),
                'radius': radius / 2,
                'color': (RegExp.$4 || '#000')
            };
            shadow.position_offset = {
                'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),
                'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x)
            };
            shadow.size_offset = {
                'width': 0,
                'height': 0
            };
            shadow.style.color = shadow.userAttrs.color;
            shadow.style.position = 'absolute';
            shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) + 'px';
            shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) + 'px';
            shadow.style.antialias = true;
            shadow.style.behavior = null;
            shadow.className = 'ieCSS3_text_shadow';
            shadow.innerHTML = element.innerHTML;
            // For some reason it only looks right with opacity at 75%
            shadow.style.filter = '
            progid:DXImageTransform.Microsoft.Alpha(Opacity=75)
            progid:DXImageTransform.Microsoft.Blur(pixelRadius=' + shadow.userAttrs.radius + ',makeShadow=false,shadowOpacity=100)
        ';
    
            var clone = element.cloneNode(true);
            clone.position_offset = {
                'y': (0 - vml_parent.pos_ieCSS3.y),
                'x': (0 - vml_parent.pos_ieCSS3.x)
            };
            clone.size_offset = {
                'width': 0,
                'height': 0
            };
            clone.style.behavior = null;
            clone.style.position = 'absolute';
            clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) + 'px';
            clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) + 'px';
            clone.className = 'ieCSS3_text_shadow';
    
    
            element.parentNode.appendChild(shadow);
            element.parentNode.appendChild(clone);
    
            element.style.visibility = 'hidden';
    
            // For window resizing
            element.vml.push(clone);
            element.vml.push(shadow);
    
            return (true);
        }
    
        function ondocumentready(classID) {
            if (!supportsVml()) { return (false); }
    
            if (this.className.match(classID)) { return (false); }
            this.className = this.className.concat(' ', classID);
    
            // Add a namespace for VML (IE8 requires it)
            if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
    
            // Check to see if we've run once before on this page
            if (typeof (window.ieCSS3) == 'undefined') {
                // Create global ieCSS3 object
                window.ieCSS3 = {
                    'vmlified_elements': new Array(),
                    'update_timer': setInterval(updatePositionAndSize, timer_length)
                };
    
                if (typeof (window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; }
    
                // Attach window resize event
                window.onresize = updatePositionAndSize;
            }
    
    
            // These attrs are for the script and have no meaning to the browser:
            this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] ||
                                     this.currentStyle['-moz-border-radius'] ||
                                     this.currentStyle['-webkit-border-radius'] ||
                                     this.currentStyle['border-radius'] ||
                                     this.currentStyle['-khtml-border-radius']);
            this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1);
            this.fillColor = this.currentStyle.backgroundColor;
            this.fillSrc = this.currentStyle.backgroundImage.replace(/^url("(.+)")$/, '$1');
            this.strokeColor = this.currentStyle.borderColor;
            this.strokeWeight = parseInt(this.currentStyle.borderWidth);
            this.stroked = 'true';
            if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {
                this.strokeWeight = 0;
                this.strokeColor = fillColor;
                this.stroked = 'false';
            }
            this.opacity = parseFloat(this.currentStyle.opacity || 1);
            this.textShadow = this.currentStyle['text-shadow'];
    
            this.element.vml = new Array();
            this.zIndex = parseInt(this.currentStyle.zIndex);
            if (isNaN(this.zIndex)) { this.zIndex = 0; }
    
            // Find which element provides position:relative for the target element (default to BODY)
            vml_parent = this;
            var limit = 100, i = 0;
            do {
                vml_parent = vml_parent.parentElement;
                i++;
                if (i >= limit) { return (false); }
            } while ((typeof (vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY'));
    
            vml_parent.pos_ieCSS3 = findPos(vml_parent);
            this.pos_ieCSS3 = findPos(this);
    
            var rv1 = createBoxShadow(this, vml_parent);
            var rv2 = createBorderRect(this, vml_parent);
            var rv3 = createTextShadow(this, vml_parent);
            if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); }
    
            if (typeof (vml_parent.document.ieCSS3_stylesheet) == 'undefined') {
                vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();
                vml_parent.document.ieCSS3_stylesheet.addRule("v\:roundrect", "behavior: url(#default#VML)");
                vml_parent.document.ieCSS3_stylesheet.addRule("v\:fill", "behavior: url(#default#VML)");
                // Compatibility with IE7.js
                vml_parent.document.ieCSS3_stylesheet.ie7 = true;
            }
        }
    
        function updatePositionAndSize() {
            if (typeof (window.ieCSS3.vmlified_elements) != 'object') { return (false); }
    
            for (var i in window.ieCSS3.vmlified_elements) {
                var el = window.ieCSS3.vmlified_elements[i];
    
                if (typeof (el.vml) != 'object') { continue; }
    
                for (var z in el.vml) {
                    //var parent_pos = findPos(el.vml[z].parentNode);
                    var new_pos = findPos(el);
                    new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px';
                    new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px';
                    if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; }
                    if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; }
    
                    var new_size = {
                        'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width),
                        'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height)
                    }
                    if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width + 'px'; }
                    if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height + 'px'; }
                }
            }
    
            if (event && (event.type == 'resize') && typeof (window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); }
        }
    </script>
    ie-css3

     常用按钮样式

    .btn_green{width:72px; height:30px; text-align:center; background-color:#44b549; border:none;border-radius: 5px; behavior: url(../../App_Css/border-radius.htc); cursor:pointer; font-size:14px; color:#fff;}
    .btn_green:hover{background-color:#2f9833;}
  • 相关阅读:
    无法import的原因(ImportError: No module named *****)
    Mac 安装终端软件
    MyEclipse中拷贝J2EE项目,发布到tomcat中名字一样的解决办法
    微PE工具箱 v2.1 正式版,最好用的PE工具箱
    Windows 10 v2004 (OS Build 19041.329)
    Microsoft Visual C++ 2019 14.27.28914.0[2020.06.03]
    Visual C++ 运行库合集包完整版 v20200603
    VMware-workstation-full-15.5.6-16341506官方版及密钥
    [转载]使用PRIMO组件,让你的硬盘快几倍!
    [转载]goldendict下优质词典简介及安装
  • 原文地址:https://www.cnblogs.com/loyung/p/4679333.html
走看看 - 开发者的网上家园