毛喜兵

1折角

.note {
    position: relative;
    background: #58a;
    background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
    width: 300px;
    height: 200px;
    border-radius: .5em;
    }
            
.note:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        background: linear-gradient(to left bottom, 
                       transparent 50%, 
                       rgba(0, 0, 0, .2) 0,
                        rgba(0, 0, 0, .4)) 100% 0 no-repeat;
        width: 1.73em;
        height: 3em;
        transform: translateY(-1.3em) rotate(-30deg);
        transform-origin: bottom right;
        border-bottom-left-radius: inherit;
        box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
            }

2.连字符断行

.box {
    width: 100px;
    height: 100px;
    background: greenyellow;
    hyphens: lightgray;
    text-align: justify;
}

3插入换行

html

<dl>
    <dt>Name:</dt>
    <dd>Lea Verou</dd>
    <dt>Email:</dt>
    <dd>lea@verou.me</dd>
    <dt>Location:</dt>
    <dd>Earth</dd>
</dl>

css

dt,dd{display: inline;}
dd{font-weight: bold;}
dd::after{
        content: "\a";
        white-space: pre;
        }

4文本行的斑马纹

body {
    padding: .5em;
    line-height: 1.5;
    background: beige;
    background-size: auto 3em;
    background-origin: content-box;
    background-image: linear-gradient(rgba(0, 0, 0, .2) 50%, transparent 0);
    }

5tab键的宽度

pre {
display: block;
margin: 1em 0;
white-space: pre;
width: 300px;
height: 100px;
background: red;
tab-size: 2;//重要
    }

6自定义下划线

a {
text-decoration: none;
/*background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
background-size: .2em 2px;
background-position: 0 1em;*/ 
                
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;/*点线*/
            }