css隨記01編輯技巧,背景與邊框

乙個按鈕的例子,使其值同比例變化;

button

font-size: 125%; /* assuming a 16px parent font size */

line-height: 1.5;

text-shadow: 0 -.05em .05em #335166;

padding: .3em .8em;
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
text-shadow: 0 -.05em .05em #335166;

background: #58a linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,100%,0));

box-shadow: 0 .05em .25em rgba(0,0,0,.5);
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);

border-width: 10px 10px 10px 0;

border-width: 10px;

border-left-width: 0;

對於自適應設計的一些建議製作半透明邊框

div

div

div

background: url(

no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

padding: 10px;

background: url("code-pirate.svg") no-repeat #58a
bottom right; /* or 100% 100% */
background-origin: content-box;

background: url("code-pirate.svg") no-repeat;

background-position: calc(100% - 20px) calc(100% - 10px);

outline: .6em solid #655;

box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */

background: linear-gradient(#fb3 50%, #58a 0);  //#fb3到.5位置結束,#58a從0位置開始;

background-size: 100% 30px;

//設定三種顏色

background: linear-gradient(green 33.3%, red 0, red 66.6%, yellow 0);

background: linear-gradient(to right, /* or 90deg */

#fb3 50%, #58a 0);

設定邊框背景

.something-meaningful 

.something-meaningful > div

background: linear-gradient(white, white),

url(
background-clip: padding-box, border-box;
background-size: cover;
background-origin: border-box;

隨記 搜尋技巧

總結自 大多數搜尋引擎，除了直接搜尋關鍵字，都還會提供一些高階功能，常用的包括 站內搜尋 site示例 在搜尋框中搜尋 python site 就可以把搜尋結果限定在知乎內。對於一些沒有站內搜尋或站內搜尋不好的 來說很有用。完全匹配 雙引號 示例 在搜尋框中搜尋 matching query doe...

CSS實用技巧01

01.div水平居中 div 水平居中很簡單，只需要設定div的寬頻以及讓左右margins設定成auto div container 02.文字垂直居中 單行文字居中，只需要將行高和容器高度設定成一樣即可。比如下面的html 我是一行字 然後通過下面的樣式就可以居中 div container如何...

01 css編碼技巧 css揭秘

一 儘量減少 重複 1.按鈕 btn 2.易維護vs.量少 3.currentcolor 自動從文字那獲取顏色值 hr 3.繼承 inherit inherit 可以用在任何css 屬性中，而且它總是繫結到父元素的計 算值 對偽元素來說，則會取生成該偽元素的宿主元素 這個inherit 關鍵字對於背...