使用css实现包裹式阅读全文样式效果

Web前端 潘老师 4年前 (2020-09-24) 1918 ℃ (0) 扫码查看

有时候我们的博客文章列表需要阅读全文按钮,怎么做才能炫酷有好看?今天特地给自己别搞了个包裹式类似别针一样卡在文章列表上,下面直接贴代码:
1、html代码如下:

<div class="read-all">阅读全文 >></div>

2、css代码如下:

<style> 
    .read-all{
        position: absolute;
        background: #ed1c24;
        bottom: 10px;
        right: -8px;
        color: #fffcfc;
        border-radius: 2px 2px 0 2px;
        padding: 3px 10px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 14px;
        text-shadow: -1px -1px 0 rgba(0,0,0,.3);
    }
    .read-all::before {
        position: absolute;
        content: ' ';
        bottom: -8px;
        right: 0;
        height: 0;
        width: 0;
        border-top: 4px solid #ed1c24;
        border-left: 4px solid #ed1c24;
        border-right: 4px solid transparent;
        border-bottom: 4px solid transparent;
    }
</style>

我们可以通过修改padding属性来调整按钮的大小,通过绝对定位来调节你想要显示的位置,修改背景色来调整按钮颜色,下面我们来贴下以上代码的效果:
使用css实现包裹式阅读全文样式效果
访问具体效果请点击:Java前端学习知识请访问潘子夜个人博客


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1329.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】