"CSS Secret" - résumé 47 conseils Css (A): frontière commune et les compétences de base

Note: Cet article provient du cas de livre « CSS Secret ».

1. Ensemble bordure translucide invalide?

Utilisez -élément de fond padding-boîte à résoudre.

background white
background-clip padding-box // 通过background-clip属性来调整，初始值是border-box，意味着背景会被元素的border  box（边框的外沿框）裁切掉
border 20px solid rgba(255,255,255, 0.3)
height 100px
width 100px

2. Utilisez plusieurs éléments pour simuler plusieurs frontières?

Non, à l' aide -box shadow résolu.

• box-shadow ne modifie pas la mise en page, il est nécessaire de définir les marges appropriées aux marges ou éléments.
  

box-shadow 0 0 0 10px rgba(102,102,102, .3),
           0 0 0 20px rgba(102,102,102, .1)

• Type peut également être fourni par une ligne brisée plan

outline 2px dashed white
outline-offset -10px

3. Comment le positionnement de fond flexible?

Utilisez - la position d'arrière - plan pour résoudre.

background: url(../common/images/arrow-right.png) no-repeat bottom right #FFFDE4 // bottom right是background-position的回退方案
background-position: calc(100% - 20px) calc(100% - 10px) // 更加灵活定位
padding 10px
background-origin: content-box // 使图片跟着内容层走

4. filet de frontière, un angle extérieur droit?

使用border-radius + box-shadow + contour .

• box-shadow suivra le tournage du contenu du filet, une largeur d'environ la moitié du rayon de la frontière.
• contour est une ligne droite, une largeur d'environ la moitié du rayon de la frontière.
  

L'arrière-plan de motif rayé?

.linear1
  background linear-gradient(to bottom, #fb3 50%, #58a 50%)
  background-size 100% 30px
.linear2
  background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px) // 第二个色标的位置值设置为0，那它的位置就总是会被浏览器调整为前一个色标的位置值

grille

background: white
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
                  linear-gradient(rgba(200,0,0,.5) 50%, transparent 0)
background-size: 30px 30px

7. L'arrière-plan pseudo-aléatoire

background: hsl(20, 40%, 90%)
background-image: linear-gradient(90deg, #fb3 10px, transparent 0),
                  linear-gradient(90deg, #ab4 20px, transparent 0),
                  linear-gradient(90deg, #655 20px, transparent 0)
background-size: 80px 100%, 60px 100%, 40px 100%;

8. Comment faire un cadre photo?

padding: 10px
border: 10px solid transparent
background: linear-gradient(white, white) padding-box,url(https://img3.mukewang.com/szimg/5df8852609e0762d12000676-360-202.png) border-box 0 / cover