元素边框显示圆角:-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*/

IE6支持fixed

#top{ position:fixed; _position:absolute; bottom:; 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))); }

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;
}

为元素设置边框阴影

-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;}

CSS常用样式整理的更多相关文章

  1. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  2. CSS常用样式(四)之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  3. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  4. css常用样式对文本的处理演练

    CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...

  5. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  6. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  7. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  8. css 常用样式命名规则

    大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap  ——用于最外层 头部:header  ——用于头部 主要内容:mai ...

  9. CSS常用样式--font

    CSS font 属性 参考:W3school- CSS font 所有浏览器都支持 font 属性,可在一个声明中设置所有字体属性,各属性需按顺序,语法如下: selector{ font:styl ...

随机推荐

  1. JavaScript的一些认识

    最近看了一下<nodejs开发指南>发现nodejs在某些特定的领域由他自己的长处,适合密集计算但是业务逻辑比较简单的场景,如果做网站还是选择php吧,呵呵,这本书我除了第5章<用n ...

  2. html部分---样式表,选择器;

    <1.内联样式,优点:控制精确,缺点:代码重用性差,页面代码乱.> <div style="background-color:#0F0"></div& ...

  3. spark_updateStateByKey

    java核心代码 JavaPairDStream<String, Integer> wordCounts = pair.updateStateByKey(new Function2< ...

  4. 关于setInterval()里的this和细节

    setInterval(fn,t);里的fn中,要使用外部类的this,则需要先将this保存起来,再使用保存的this,不能直接使用this,里面的this是指向window对象,记住setInte ...

  5. 【P1326】超级教主

    DP优化 原题: LHX教主很能跳,因为Orz他的人太多了.教主跳需要消耗能量,每跳1米就会消耗1点能量,如果教主有很多能量就能跳很高.教主为了收集能量,来到了一个神秘的地方,这个地方凡人是进不来的. ...

  6. windows环境下安装python模块大招

    python发展到今天,感觉版本有点控制不住了,同时出现多个版本python2.5,python2.7 python 3 ,同时跨越windows,mac,*inux等多个平台,还有32位,64位等不 ...

  7. HashMap和HashSet的区别

    理解HashSet及使用 HashMap和HashSet的区别是Java面试中最常被问到的问题.如果没有涉及到Collection框架以及多线程的面试,可以说是不完整.而Collection框架的问题 ...

  8. Questions?

    http://www.datastax.com/wp-content/themes/datastax-2014-08/files/NoSQL_Benchmarks_EndPoint.pdf http: ...

  9. oracle_dblink配置

    说明:一下是未配置本地服务的dblink. 前提:   授权>  grant create public database link,create database link to myAcco ...

  10. 使用支持向量机训练mnist数据

    # encoding: utf-8 import numpy as np import matplotlib.pyplot as plt import cPickle import gzip clas ...