ru he chuang jian: CSS cai dai

ru he chuang jian cai dai

di yi bu - tianjia HTML:

zai zhe ge li, cai dai shu yu button yuan su:

<button class="btn">A button for something cool <span class="ribbon">NEW</span></button>

di er bu - tianjia CSS:

.btn {
  bian: bu cuo;
  bian jiao yu: 5 px;
  kong juan: 12 px 20 px;
  wen zi da xiao: 16 px;
  shou hua: zhi zhen;
  bei jian se li: #282A35;
  yan se: bai;
  ding wei: guan xian;
}
.ribbon {
  kuang jia: 60 px;
  wen zi da xiao: 14 px;
  kong juan: 4 px;
  ding wei: biao duan;
  you: -25 px;
  shang: -12 px;
  wen zi jing zhi: zhong jian;
  bian jiao yu: 25 px;
  zhuan huan: xuan zhe 20 du;
  bei jian se li: #ff9800;
  yan se: bai;
}

zishen shi yi yi

li ming shi shi jie shi:

huwanan nini, CSS ben lai yong yu tianjia yige cai dai xiao guo. Zhege cai dai shi dui yu zai an钮 yuan su nei bu tianjia yige dai you te zheng yang shi de span yuan su lai shi xian de. Zhege span yuan su bei ding wei zai an钮 de you shang jiao jiao, bing bei xuan zhe le 20 du, yi chuang jian yige cai dai de xiao guo. Cai dai de bei jian se he wen zi se ye bei she zhi yu an钮 bu tong de yan se, yi zeng jia shi jiao xiang guan.