//从父类继承
padding: inherit;
//字母大写、小写,首字母大写
h1 {
text-transform: uppercase;}
h2 {
text-transform: lowercase;}
.credits {
text-transform: capitalize;}
//字母、汉字间距
letter-spacing: 0.2em;
//文字对齐方向
text-align: right;
//链接下划线
a {
text-decoration: none;}
a:hover {
text-decoration: underline;}
//首字母、首行
p.intro:first-letter {
font-size: 200%;}
p.intro:first-line {
font-weight: bold;}
//hove active focus
input.submit:hover {
background-color: #665544;}
input.submit:active {
background-color: chocolate;}
input.text {
color: #cccccc;}
input.text:focus {
color:#665544;}
a:link {
color: deeppink;
text-decoration: none;}
a:visited {
color: black;}
//词间距,针对英文单词
word-spacing: 1em;
//两端对齐
text-align: justify;
//缩进
text-indent: 20px;
//盒子阴影
p.one {
-moz-box-shadow: -5px -5px #777777;
-webkit-box-shadow: -5px -5px #777777;
box-shadow: -5px -5px #777777;}
//图片对齐方式
#six-months {
vertical-align: text-top;}
#one-year {
vertical-align: baseline;}
#two-years {
vertical-align: text-bottom;}
//边框颜色
border-color: #bbbbaa #111111 #ee3e80 #0088dd;
//边框图片
-moz-border-image: url("images/dots.gif") 11 11 11 11 stretch;
-webkit-border-image: url("images/dots.gif") 11 11 11 11 stretch;
border-image: url("images/dots.gif") 11 11 11 11 stretch;}
p.two {
-moz-border-image: url("images/dots.gif") 11 11 11 11 round;
-webkit-border-image: url("images/dots.gif") 11 11 11 11 round;
border-image: url("images/dots.gif") 11 11 11 11 round;}
//圆角
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
//边框的样式
p.one {
border-style: solid;}
p.two {
border-style: dotted;}
p.three {
border-style: dashed;}
p.four {
border-style: double;}
p.five {
border-style: groove;}
p.six {
border-style: ridge;}
p.seven {
border-style: inset;}
p.eight {
border-style: outset;}
//块转化成内联
li {
display: inline;
margin-right: 10px;}
//边角
display: inline-block;
margin: 20px;}
p.one {
border-top-left-radius: 80px 50px;
-moz-border-radius-top-left: 80px 50px;
-webkit-border-radius-top-left: 80px 50px;}
p.two {
border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
-moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
-webkit-border-radius: 1em 4em 1em 8em / 2em 1em 2em 1em;}
p.three {
padding: 0px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;}
//最大最小高度
p {
min-height: 10px;
max-height: 30px;}
//最大最小宽度
min-width: 450px;
max-width: 650px;
//隐藏,还是滚动
p.one {
overflow: hidden;}
p.two {
overflow: scroll;}
//隐藏占用地方,隐藏不占用地方
li.coming-soon {
visibility: hidden;}
display: none;
// 鼠标的样式
cursor: move;
//空单元的显示和隐藏
table.one {
empty-cells: show;}
table.two {
empty-cells: hide;}
//项目符号,
list-style-type: lower-roman;
list-style-image: url("images/icon-plus.png");
//表格分离,只在table标签中有效,在td,th标签无效
table {
border-spacing: 0px;}
//左右、上下
border-spacing: 5px 15px;
//合并边框
border-collapse: collapse;
//项目符号在内还是在外
ul.illuminations {
list-style-position: outside;}
ul.season {
list-style-position: inside;}
//项目符号缩写
list-style: inside circle;
//渐变做按钮的凸起,按下的效果
input#submit {
color: #444444;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: #b9e4e3;
background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce));
background: -moz-linear-gradient(top, #beeae9, #a8cfce);
background: -o-linear-gradient(top, #beeae9, #a8cfce);
background: -ms-linear-gradient(top, #beeae9, #a8cfce);}
input#submit:hover, input#submit:active{
color: #333333;
border: 1px solid #a4a4a4;
border-top: 2px solid #b2b2b2;
background-color: #a0dbc4;
background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9));
background: -moz-linear-gradient(top, #a8cfce, #beeae9);
background: -o-linear-gradient(top, #a8cfce, #beeae9);
background: -ms-linear-gradient(top, #a8cfce, #beeae9);
outline: none;}
//input-text的图片装饰
input#web {
background-image: url("images/web.png");}
//last-child选择器,first-child
.more-articles p:last-child {
border-bottom: none;}
//父元素清除浮动影响
overflow: auto;
width: 100%;
//背景图片位置固定,伴随着页面滚动而滚动
background-image: url("images/tulip.gif");
background-repeat: no-repeat;
background-attachment: fixed;
//背景图片,默认是重复的
background-image: url("images/pattern.gif");
//背景图片居中
background-image: url("images/tulip.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
//背景图片位置
background-position: center top;
//背景重复
background-image: url("images/header.gif");
background-repeat: repeat-x;
//背景设置缩写
background: #ffffff url("images/tulip.gif") no-repeat top right;
CSS查漏补缺
最新推荐文章于 2024-08-10 09:49:48 发布