Front-end style of CSS2

This article is a summary and merging of the relatively small CSS styles used, which are commonly used and easy to forget.

1. As a background, you can set a non-repetitive layout and reduce the ratio by 50%. If the position is not satisfactory, you can use the background-position to adjust the position. Note that the origin position is the upper left corner of the picture, the x axis is positive to the right, and the y axis is positive to the down.

    background: url(/static/image/test.png) 0 0 no-repeat;
    background-size: 50% 50%;
    background-position: -5px 1px;

2. Put the picture in the div 2. 1 src: required attribute, set the picture URL
2. 2 width/ height: optional (displayed on the page according to the original size by default), you can manually set the picture width and height through width/height, Take the pixel value; if only the width or height is set, the size in the other direction will be scaled proportionally (browser adaptive)
2. 3 title: Set the image title, displayed when the mouse is hovered
2. 4. alt: Set the image load failure Prompt text

<div style="background: #3e82f7; width: 300px;height: 300px; border: red solid 2px">
   <img src="pyy.jpg" title="这是一张图片" alt="此处曾经有一张图片" style="width:150px; height:200px; border: yellow solid 2px">
</div>

3. div adaptive height (width)

height: calc(100% - 100px);

4. Background color, transparency settings

 background-color: rgb(255, 246, 252); // 无透明度
 background-color: red;
 background-color: #ff0000;
 opcity:0.6;   // 透明度0.6
 background-color: rgba(255, 246, 252,0.6); // 带透明度

5. css implements drop-down arrow

    <div id="box"></div>
    // css部分
     #box{
    
    
            height: 0px;
            width: 0px;  
            /*方法1*/
            /* border-top: 10px solid red;
            border-right: 10px solid rgba(0,0,0,0);
            border-bottom: 10px solid rgba(0,0,0,0);
            border-left: 10px solid  transparent;*/
             
            /*方法1*/
            border: 10px solid transparent;
            border-top: 10px solid red; 
        }

6. Box shadow
   a) Attribute: box-shadow
   b) Value: offsetX offsetY blur (spread) color;
   i.offsetX: take the pixel value, indicating the horizontal offset distance of the shadow, positive value indicates the right offset, negative value indicates the direction Left offset
   ii.offsetY: take the pixel value, indicating the vertical offset distance of the shadow, a positive value indicates a downward offset, a negative value indicates an upward offset
   iii.blur: a pixel value, indicating the degree of blur of the shadow, the larger the value, the more Blur
   iv.spread: take the pixel value to indicate the extension distance of the shadow (optional)
   v.color: set the shadow color, the default is black

<div>设置盒阴影</div>
/*css*/
div{
    
    
            width: 100px;
            height: 50px;
            border: 10px solid red;
            box-shadow: 10px 10px 5px gray;
        }

The effect is as follows: