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

Web前端 潘老师 12个月前 (09-24) 609 ℃ (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实现包裹式阅读全文样式效果


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:使用css实现包裹式阅读全文样式效果
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

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

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

您也可以 微信登录 来发表评论!