网页样式集合

最新推荐文章于 2025-08-15 10:51:23 发布

卡瓦尼了

最新推荐文章于 2025-08-15 10:51:23 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_40544688/article/details/86150238

本文深入探讨了CSS的各种实用技巧，包括按钮阴影效果、列表项的动态变化、鼠标悬停反馈、使用边框创建三角形以及空心三角形的实现方法。通过这些技巧，可以提升网页的视觉效果和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、按钮

input{
    -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 14px 20px -9px rgba(0, 0, 0,
}

二.块

li{
    -webkit-transform: translate3d(0, 0, 0);
}
li:hover{
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
}

三.鼠标移动

li{
    position: relative;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}
li:after{
    content: "";
    position: absolute;
    left: 51%;
    right: 51%;
    bottom: 0;
    background-color: #36bae8;
    height: 2px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
li.on:after{
    left: 0;
    right: 0;
}

四.border三角形

<div class="border-left"></div>
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>

.border-left{
     width: 0;
     border-top: 50px solid transparent;
     border-left: 100px solid red;
     border-bottom: 50px solid transparent;
}
.border-top{
     width: 0;
     border-top: 100px solid red;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
}
.border-right{
     width: 0;
     border-top: 50px solid transparent;
     border-left: 100px solid red;
     border-bottom: 50px solid transparent;
}
.border-bottom{
     width: 0;
     border-left: 50px solid transparent;
     border-bottom: 100px solid red;
     border-right: 50px solid transparent;
}

五.空心三角形

<div class="triangle"></div>

.triange{
    margin-left: 20px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.triange:before {
     content: '';
     position: absolute;
     top: 10px;
     left: -10px;
     width: 0;
     height: 0;
     border-right: 10px solid red;
     border-bottom: 10px solid transparent;
     border-top: 10px solid transparent; 
 }
 .triange:after {
     content: '';
     position: absolute;
     top: 11px;
     left: -9px;
     width: 0;
     height: 0;
     border-bottom: 9px solid transparent;
     border-right: 9px solid #fff;
     border-top: 9px solid transparent; 
 }