- .box {
- width: 0;
- height: 0;
- margin: 0 auto;
- /* 等腰直角三角: 各边框宽度一致,将上边框保留,其他边框设置为透明色 */
- border: 100px solid transparent;
- border-top: 100px solid red;
- }
-
-
- <div class="box">div>
- .box {
- width: 200px;
- height: 200px;
- /* 一下三句就是做省略的关键 */
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- <div class="box">div>
- .box {
- height: auto;
- /* 设置不换行 */
- white-space: nowrap;
- /* x轴超出可滚动 */
- overflow-x: auto;
- overflow-y: hidden;
- border: 1px solid #ccc;
- }
-
- <div class="box">
- <img src="../image/logo.png" alt="">
- ...
- div>
- .box:before,
- .box:after {
- content: "";
- display: block;
- clear: both;
- }
-
- <div class="box">
- <div class="left">div>
- <div class="right">div>
- div>
- .box {
- position: relative;
- width: 200px;
- height: 200px;
- margin: 100px auto;
- background-color: #ccc;
- }
-
- .box::before {
- content: '';
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- height: 5px;
- background: -webkit-repeating-linear-gradient(45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
- background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
- background-size: 80px;
- }
-
- <div class="box">div>
- .box {
- height: 200px;
- }
-
- .middle {
- margin-top: 100px;
- transform: translateY(-50%);
- }
-
- <div class="box">
- <div class="middle">div>
- div>
- .box {
- overflow: scroll;
- }
-
- .box::-webkit-scrollbar {
- display: none;
- width: 0 !important;
- }
-
- <div class="box">div>
- /*滚动条整体样式*/
- .box::-webkit-scrollbar {
- width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
- height: 5px;
- }
-
- /*滚动条里面小方块*/
- .box::-webkit-scrollbar-thumb {
- border-radius: 5px;
- box-shadow: inset 0 0 5px #fafafa;
- -webkit-box-shadow: inset 0 0 5px #fafafa;
- background: rgba(0,0,0,.075);
- }
-
- /*滚动条里面轨道*/
- .box::-webkit-scrollbar-track {
- box-shadow: inset 0 0 5px #fafafa;
- -webkit-box-shadow: inset 0 0 5px #fafafa;
- border-radius: 0;
- background: #ececec;
- }
-
- <div class="box">div
-
- https://www.cnblogs.com/ranyonsue/p/9487599.html
- input {
- width: 100%;
- outline-color: invert;
- outline-style: none;
- outline-width: 0px;
- border: none;
- border-style: none;
- text-shadow: none;
- -webkit-appearance: none;
- -webkit-user-select: text;
- outline-color: transparent;
- box-shadow: none;
- }
-
- select {
- border: 0;
- display: block;
- width: 100%;
- white-space: nowrap;
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- }
- .box {
- animation: move 2.5s linear 2.5s;
- }
-
- @keyframes move {
- 0% {
- ...
- }
- 100% {
- ...
- }
- }
-
- <div class="box">div>
- .box {
- width: 200px;
- height: 20px;
- margin: 0 auto;
- border: 1px solid red;
- border-radius: 10px;
- box-sizing: border-box;
- }
-
- .son {
- width: 50%;
- height: 100%;
- border-radius: 10px;
- background-color: red;
- /* 过渡效果 */
- transition: all 1s ease-in-out 0.3s;
- }
-
- .box:hover .son {
- width: 100%;
- background-color: green;
- }
-
- <div class="box">
- <div class="son">div>
- div>