博客园主题修改中用到的css属性

样式覆盖

id选择器大于class选择器。

对于原主题中想要覆盖的id选择器，使用!import覆盖。

对于原主题中想要取消的css属性，使用inherit.

浮动元素

将position设置为fixed, 为了让组件可以浮动在其他组件之上，设置z-index.

fuck me on github

element.style {
    top: 0;
    right: 0;
    border: 0;
    z-index: 100;
    position: fixed;
}

透明的输入框

设置background为transparent可以将输入框透明；

将border设为0可以隐藏边框，然后追加bottom样式，注意顺序，后面声明的样式会覆盖前面。

input#nav_search {
    background: transparent;
    transition: all .6s ease-in-out;
    border: ;
    border-bottom: 1px solid #fff;
    color: #fff;
    width: 5pc;
}

动画

css3中同一个元素属性发生变化后可以声明一个变化过程，即transition. transition: all .6s ease-in-out;表示0.6s内完成动画。

图标库

引入http://fontawesome.io . 比如search的图标为
fa fa-search

组件之间的间距设定

使用padding和margin来设置间距而不是声明width和hight后调整中心。

设置div圆角

#post_detail .postTitle {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

设置字体大小

#post_detail .postTitle {
    font-size: 30px;
    font-weight: ;
}

设置立体感的边框

#post_detail {
    box-shadow:  8px 17px  rgba(0,,,.2),  6px 20px  rgba(0,,,.19);
}

设置公告的虚线分割

.my-profile {
    border-bottom: 1px dashed #333;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

设置引用块左侧颜色

#cnblogs_post_body ul.post-copyright {
    border-left: 3px solid #ff1700;
    background-color: #f9f9f9;
}

将分类的竖排打乱

.catListPostCategory li {
    display: inline-block;
}