常用的CSS样式代码

lr首页 » 程序员常用的css代码 css样式

css强制换行

word-wrap: break-word;
word-break: break-all;
white-space: pre-wrap;
/*空白独立一行*/

css禁止选择内容

user-select: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;

css只允许输入/粘贴字符串

-webkit-user-modify: read-write-plaintext-only;
-moz-user-modify: read-write-plaintext-only;
user-modify: read-write-plaintext-only;

css内容显示最多3行

max-height: 120px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;
overflow: hidden;

css缩小字体

display: inline-block;
transform-origin: center;
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
-o-transform: scale(0.85);
transform: scale(0.85);

css等腰三角形符号加转动特效

<span class="animateDir"></span>

                @keyframes changeDire1 {
                    from {
                        transform:rotate(-90deg);
                        -ms-transform:rotate(-90deg); 	/* IE 9 */
                        -moz-transform:rotate(-90deg); 	/* Firefox */
                        -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
                        -o-transform:rotate(-90deg); 	/* Opera */
                    }
                    to {
                        transform:rotate(0deg);
                        -ms-transform:rotate(0deg); 	/* IE 9 */
                        -moz-transform:rotate(0deg); 	/* Firefox */
                        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
                        -o-transform:rotate(0deg); 	/* Opera */
                    }
                }
                @keyframes changeDire2 {
                    from {
                        transform:rotate(0deg);
                        -ms-transform:rotate(0deg); 	/* IE 9 */
                        -moz-transform:rotate(0deg); 	/* Firefox */
                        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
                        -o-transform:rotate(0deg); 	/* Opera */
                    }
                    to {
                        transform:rotate(-90deg);
                        -ms-transform:rotate(-90deg); 	/* IE 9 */
                        -moz-transform:rotate(-90deg); 	/* Firefox */
                        -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
                        -o-transform:rotate(-90deg); 	/* Opera */
                    }
                }
                .animateDir {
                    display: inline-block;
                    transform-origin: right;
                    animation: 0.2s changeDire1 forwards;
                }
                .animateDir:before {
                    content: '';
                    border-width: 8px;
                    border-style: solid;
                    width: 0;
                    height: 0;
                    border-color: transparent #555 transparent transparent;
                    display: inline-block;
                }
                .animateDir.active {
                    animation: 0.2s changeDire2 forwards;
                }

css 加斑马线

                .list ul li:nth-child(odd) {
                    background-color: #f7f7f7;
                }
                .list ul li:nth-child(even) {
                    background-color: #f7f7f7;
                }

table完整代码加斑马线

基本的表格布局
名称	城市 thead->th->td
a	Bangalore tbody->tr->td
b	b1
c	c1

                <table class="table  table-striped" style="max-width: 500px;margin: 0 auto 10px auto;">
                    <caption>基本的表格布局</caption>
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>thead->th->td </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>tbody->tr->td</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>tbody->tr->td</td>
                    </tr>
                    </tbody>
                </table>
                相当于css样式：.table-striped>tbody>tr:nth-of-type(odd)

css画小图标标准写法/css背景引入小图标

变形金刚


.demoIcon {
    width: 20px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAC5klEQVQ4T62UP2hTURTGfUkGB4cgFRUUFDK4CBUUC1ZQsGiRUIVWIgpWdKi0IQ1Rgzg0gkMLhiRNLQgGn1CpWMXBih0iBlTM0KGgQ8GCGTJk6GBjh9J/8feFmxCTCA4++Dj3nnPud86595xnbfnPn9WMLxgMHkbfVSqV2pF7wD5QYJ+3LOvb5ubmq2KxmLFte6X+vDU4ONiNcgrkwENwDJz7h8QXIT7pcDjeKCCBxmKxmN8iGw+RvxuCWUM+glwH98HTGnJlHlPWEExAuIzskx0OfyKRGCuXTJa/UExjPKCSUKXZP0C2sJ/e2Ni4QyZX5GrI49h/YLuHfImuV9kmk8lshfCjuadZnPI4nTGER9hfq2SIbkYlIntUAXIRu3y3rq2t7RgfH18uE1J2kgjdOD9GnkL1FvSz97I/xKHbymRpaWnE7XZ/VQVA5c8DD8jF4/Hz4ioT+v3+NqfT+Y6lG9gmo8vIW+ASpCnsZyn9GUEm0c0B3bdPvug7VG6VUAvu8QRiCEjmyKhg7rOFffnVIb4BYRjbvEpFtaCgq6uraZX7B2EgEPiCUwrnFQ4dRbbioD5TNjdNkBQ+XSCL/b2579fYDlLyz/oMP+DU5nK59kaj0UWTta4gACLgE/BWDhq7HrMdXXVAqgsynCSiT+VAepx76WftQ/fcEGaUJVCQILgLrutq6L/dClCf4RMUvVLidAGiF4bAriOUz1Ugf3164f0NhLTOMERhY9ALTxjCBFLTkQG6TzV3LeFnCDXzDRnqhSMmQy8ZakZzQP3VygsXeKzTTQjTEHY0y1AzrV70cPii6TfNc77ijFQLbavJcBnfntHR0ZkGQilCoVALjzGF06NKA5NpGN12zEWau5OgA4ZwCD8vZJr96tfwP4xEIi5GbCfOCxzug3AY7NIJdJ3md9VDM2dp5kItmdZNf7Ay0EYDEKn7K68ptf6Xc8yzTWBdR8P3V0J5Mo7qOaH8Ufo6M1t7pw2EvwEdfIIk2tVxbQAAAABJRU5ErkJggg==) 0 0 transparent no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: text-bottom;
    cursor: pointer;
}