AI 助理
备案控制台
开发者社区 云原生 文章 正文

CSS实现旋转圆角叠加样式，你学会了吗？

2024-10-12 16
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS实现旋转圆角叠加样式，你学会了吗？

CSS实现旋转圆角叠加样式，你学会了吗？

本文介绍了如何使用CSS实现旋转圆角叠加样式。圆角和旋转可以通过border-radius和transform属性来实现，而叠加可以通过不同的容器来实现。通过灵活运用这些CSS属性，可以创建出各种效果丰富的页面。


<template>
  <view class="container container23285">
    <view class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
      <view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
        <view class="flex flex-wrap diygw-col-24 flex-direction-column flex31-clz">
          <view class="flex flex-wrap diygw-col-24 flex1-clz">
            <view class="diygw-col-0 text4-clz"> </view>
            <view class="flex flex-wrap diygw-col-0 justify-end items-stretch flex3-clz">
              <view class="diygw-col-0 text-clz"> </view>
            </view>
            <view class="diygw-col-0 text1-clz"> </view>
          </view>
        </view>
        <view class="flex flex-wrap diygw-col-24 justify-between flex32-clz">
          <view class="flex flex-wrap diygw-col-0 flex33-clz">
            <text class="flex icon10 diygw-col-0 icon10-clz diy-icon-home"></text>
          </view>
          <view class="flex flex-wrap diygw-col-0 flex34-clz">
            <text class="flex icon13 diygw-col-0 icon13-clz diy-icon-camerafill"></text>
            <text class="flex icon14 diygw-col-0 icon14-clz diy-icon-lihe"></text>
            <text class="flex icon15 diygw-col-0 icon15-clz diy-icon-yuyin"></text>
          </view>
        </view>
        <view class="flex flex-wrap diygw-col-24 flex2-clz">
          <view class="flex flex-wrap diygw-col-24 items-center flex74-clz">
            <image src="/static/10.jpg" class="image8-size diygw-image diygw-col-0 image8-clz" mode="widthFix"></image>
            <view class="flex flex-wrap diygw-col-0 justify-between flex35-clz">
              <view class="diygw-text-line1 diygw-col-0 text2-clz"> DIY可视化 </view>
              <view class="diygw-text-line1 diygw-col-24 text62-clz"> 一个二次喜欢元灵感创意 </view>
            </view>
          </view>
          <view class="flex flex-wrap diygw-col-24 justify-around flex75-clz">
            <view class="flex flex-wrap diygw-col-0 flex-direction-column justify-end items-center flex78-clz">
              <view class="diygw-text-line1 diygw-col-0 text56-clz"> 999 </view>
              <view class="diygw-text-line1 diygw-col-0 text3-clz"> 可用积分 </view>
            </view>
            <view class="flex flex-wrap diygw-col-0 flex-direction-column justify-end items-center flex36-clz">
              <view class="diygw-text-line1 diygw-col-0 text20-clz"> 10 </view>
              <view class="diygw-text-line1 diygw-col-0 text24-clz"> 优惠券 </view>
            </view>
            <view class="flex flex-wrap diygw-col-0 flex-direction-column justify-end items-center flex37-clz">
              <view class="diygw-text-line1 diygw-col-0 text25-clz"> 518.99 </view>
              <view class="diygw-text-line1 diygw-col-0 text26-clz"> 可用余额 </view>
            </view>
            <view class="flex flex-wrap diygw-col-0 flex-direction-column justify-end items-center flex38-clz">
              <view class="diygw-text-line1 diygw-col-0 text27-clz"> 518.99 </view>
              <view class="diygw-text-line1 diygw-col-0 text28-clz"> 可用余额 </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex flex-wrap diygw-col-24 items-start flex24-clz">
      <image src="/static/10.jpg" class="image-size diygw-image diygw-col-0 image-clz" mode="widthFix"></image>
      <view class="flex flex-wrap diygw-col-0 flex-direction-column flex25-clz">
        <view class="flex flex-wrap diygw-col-24 justify-start flex30-clz">
          <view class="diygw-col-0 text23-clz"> DIY可视化 </view>
        </view>
        <view class="flex flex-wrap diygw-col-24 justify-center items-center flex21-clz">
          <text class="flex icon6 diygw-col-0 icon6-clz diy-icon-usefullfill"></text>
          <view class="diygw-col-0 text17-clz"> 气泡样式组件，设置背景样式及图标颜色 </view>
        </view>
      </view>
    </view>
    <view class="flex flex-wrap diygw-col-24 items-start flex26-clz">
      <view class="flex flex-wrap diygw-col-0 flex-direction-column flex27-clz">
        <view class="flex flex-wrap diygw-col-24 justify-end flex29-clz">
          <view class="diygw-col-0 text21-clz"> DIY可视化 </view>
        </view>
        <view class="flex flex-wrap diygw-col-24 justify-center items-center flex28-clz">
          <text class="flex icon9 diygw-col-0 icon9-clz diy-icon-usefullfill"></text>
          <view class="diygw-col-0 text22-clz"> 气泡样式组件，设置背景样式及图标颜色 </view>
        </view>
      </view>
      <image src="/static/kt.png" class="image1-size diygw-image diygw-col-0 image1-clz" mode="widthFix"></image>
    </view>
    <view class="flex flex-wrap diygw-col-24 flex-direction-column flex18-clz">
      <view class="flex flex-wrap diygw-col-24 justify-center items-center flex5-clz">
        <text class="flex icon diygw-col-0 icon-clz diy-icon-usefullfill"></text>
        <view class="diygw-col-0 text5-clz"> 气泡样式组件，设置背景样式及图标颜色 </view>
      </view>
      <view class="flex flex-wrap diygw-col-24 justify-center items-center flex16-clz">
        <text class="flex icon3 diygw-col-0 icon3-clz diy-icon-usefullfill"></text>
        <view class="diygw-col-0 text14-clz"> 气泡样式组件，设置背景样式及图标颜色 </view>
      </view>
      <view class="flex flex-wrap diygw-col-24 justify-center items-center flex17-clz">
        <text class="flex icon4 diygw-col-0 icon4-clz diy-icon-usefullfill"></text>
        <view class="diygw-col-0 text16-clz"> 气泡样式组件，设置背景样式及图标颜色 </view>
      </view>
      <view class="flex flex-wrap diygw-col-24 justify-center items-center flex15-clz">
        <text class="flex icon2 diygw-col-0 icon2-clz diy-icon-usefullfill"></text>
        <view class="diygw-col-0 text13-clz"> 气泡样式组件，设置背景样式及图标颜色 </view>
      </view>
    </view>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: {}
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    methods: {
      async init() {
        await this.loadFunction();
      },
      // 新增方法 自定义方法
      async loadFunction(param) {
        let thiz = this;
        this.upload = 'https://www.diygw.com/static/img/pic1.jpg';
        this.uupload = 'https://www.diygw.com/static/img/pic1.jpg';
      }
    }
  };
</script>
 
<style lang="scss" scoped>
  .flex4-clz {
    padding-top: 16rpx;
    border-bottom-left-radius: 30rpx;
    padding-left: 16rpx;
    padding-bottom: 16rpx;
    border-top-right-radius: 30rpx;
    margin-right: 20rpx;
    background-color: #1b233d;
    margin-left: 20rpx;
    overflow: hidden;
    width: calc(100% - 20rpx - 20rpx) !important;
    border-top-left-radius: 30rpx;
    margin-top: 20rpx;
    border-bottom-right-radius: 30rpx;
    margin-bottom: 20rpx;
    padding-right: 16rpx;
  }
  .flex-clz {
    border-bottom-left-radius: 24rpx;
    overflow: hidden;
    border-top-left-radius: 0rpx;
    border-top-right-radius: 24rpx;
    border-bottom-right-radius: 24rpx;
    background-image: linear-gradient(45deg, rgb(4, 159, 187) 0%, rgb(80, 246, 255) 100%);
  }
  .flex1-clz {
    overflow: visible;
  }
  .text4-clz {
    border-bottom-left-radius: 0rpx;
    color: #ede9e9;
    bottom: -30rpx;
    border-top-right-radius: 0rpx;
    background-color: rgba(255, 255, 255, 0);
    flex-shrink: 0;
    box-shadow: -10rpx -10rpx 0rpx 2px #1b233d;
    overflow: hidden;
    left: 0rpx;
    width: 30rpx !important;
    border-top-left-radius: 20rpx;
    border-bottom-right-radius: 0rpx;
    position: absolute;
    height: 30rpx !important;
  }
  .flex3-clz {
    background-color: #1b233d;
    border-bottom-left-radius: 0rpx;
    box-shadow: -20rpx -20rpx 0rpx #1b233d;
    transform: translate(-80rpx, 0rpx) skew(-40deg, 0deg);
    overflow: visible;
    flex: 1;
    border-top-left-radius: 0rpx;
    border-top-right-radius: 0rpx;
    border-bottom-right-radius: 20rpx;
  }
  .text-clz {
    border-bottom-left-radius: 0rpx;
    color: #ede9e9;
    border-top-right-radius: 0rpx;
    right: -30rpx;
    background-color: rgba(255, 255, 255, 0);
    flex-shrink: 0;
    box-shadow: -10rpx -10rpx 0rpx 2px #1b233d;
    overflow: hidden;
    top: 0rpx;
    width: 30rpx !important;
    border-top-left-radius: 20rpx;
    border-bottom-right-radius: 0rpx;
    position: absolute;
    height: 30rpx !important;
  }
  .text1-clz {
    flex-shrink: 0;
    width: 160rpx !important;
    height: 70rpx !important;
  }
  .flex32-clz {
    margin-left: 0rpx;
    width: calc(100% - 0rpx - 0rpx) !important;
    margin-top: -72rpx;
    margin-bottom: 0rpx;
    margin-right: 0rpx;
  }
  .flex33-clz {
    color: #ffffff;
    flex: 1;
  }
  .icon10-clz {
    margin-left: 10rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .icon10 {
    font-size: 40rpx;
  }
  .flex34-clz {
    padding-top: 0rpx;
    color: #1b233d;
    padding-left: 10rpx;
    padding-bottom: 0rpx;
    padding-right: 10rpx;
  }
  .icon13-clz {
    margin-left: 10rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .icon13 {
    font-size: 40rpx;
  }
  .icon14-clz {
    margin-left: 10rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .icon14 {
    font-size: 40rpx;
  }
  .icon15-clz {
    margin-left: 10rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .icon15 {
    font-size: 40rpx;
  }
  .flex2-clz {
    padding-top: 10rpx;
    color: #ffffff;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .flex74-clz {
    margin-left: 10rpx;
    padding-top: 10rpx;
    padding-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    padding-bottom: 10rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
    padding-right: 10rpx;
  }
  .image8-clz {
    border-bottom-left-radius: 120rpx;
    overflow: hidden;
    border-top-left-radius: 120rpx;
    border-top-right-radius: 120rpx;
    border-bottom-right-radius: 120rpx;
  }
  .image8-size {
    height: 128rpx !important;
    width: 128rpx !important;
  }
  .flex35-clz {
    padding-top: 10rpx;
    flex: 1;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .text2-clz {
    font-weight: bold;
    font-size: 40rpx !important;
  }
  .text62-clz {
    color: #ececec;
  }
  .flex75-clz {
    margin-left: 10rpx;
    padding-top: 10rpx;
    padding-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    padding-bottom: 10rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
    padding-right: 10rpx;
  }
  .text56-clz {
    font-weight: bold;
    font-size: 40rpx !important;
  }
  .text3-clz {
    color: #ececec;
  }
  .text20-clz {
    font-weight: bold;
    font-size: 40rpx !important;
  }
  .text24-clz {
    color: #ececec;
  }
  .text25-clz {
    font-weight: bold;
    font-size: 40rpx !important;
  }
  .text26-clz {
    color: #ececec;
  }
  .text27-clz {
    font-weight: bold;
    font-size: 40rpx !important;
  }
  .text28-clz {
    color: #ececec;
  }
  .flex24-clz {
    background-color: #f5f5f5;
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .image-clz {
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
  }
  .image-size {
    height: 96rpx !important;
    width: 96rpx !important;
  }
  .flex25-clz {
    padding-top: 0rpx;
    flex: 1;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .flex30-clz {
    margin-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    margin-top: 0rpx;
    margin-bottom: 0rpx;
    margin-right: 10rpx;
  }
  .text23-clz {
    color: #797979;
  }
  .flex21-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 10rpx;
    background-color: #ffffff;
    margin-left: 10rpx;
    overflow: visible;
    width: calc(100% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    padding-right: 20rpx;
  }
  .icon6-clz {
    transform: translate(0rpx, 0rpx) rotate(30deg);
    color: #ffffff;
    top: 30rpx;
    left: -20rpx;
    position: absolute;
  }
  .icon6 {
    font-size: 32rpx;
  }
  .text17-clz {
    font-size: 34rpx !important;
  }
  .flex26-clz {
    background-color: #f5f5f5;
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .flex27-clz {
    padding-top: 0rpx;
    flex: 1;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .flex29-clz {
    margin-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    margin-top: 0rpx;
    margin-bottom: 0rpx;
    margin-right: 10rpx;
  }
  .text21-clz {
    color: #797979;
  }
  .flex28-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 10rpx;
    background-color: #ffffff;
    margin-left: 10rpx;
    overflow: visible;
    width: calc(100% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    padding-right: 20rpx;
  }
  .icon9-clz {
    transform: translate(0rpx, 0rpx) rotate(-30deg);
    color: #ffffff;
    top: 30rpx;
    position: absolute;
    right: -20rpx;
  }
  .icon9 {
    font-size: 32rpx;
  }
  .text22-clz {
    font-size: 34rpx !important;
  }
  .image1-clz {
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
  }
  .image1-size {
    height: 96rpx !important;
    width: 96rpx !important;
  }
  .flex5-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #ffffff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 20rpx;
    background-color: #3e3e3e;
    margin-left: 20rpx;
    overflow: visible;
    width: calc(100% - 20rpx - 20rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 20rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .icon-clz {
    transform: translate(-50%, 0rpx);
    color: #3e3e3e;
    top: -24rpx;
    left: 50%;
    position: absolute;
  }
  .icon {
    font-size: 32rpx;
  }
  .text5-clz {
    font-size: 34rpx !important;
  }
  .flex16-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #ffffff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 20rpx;
    background-color: #3e3e3e;
    margin-left: 60rpx;
    overflow: visible;
    width: calc(100% - 60rpx - 20rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 20rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .icon3-clz {
    transform: translate(0rpx, -50%) rotate(30deg);
    color: #3e3e3e;
    top: 50%;
    left: -20rpx;
    position: absolute;
  }
  .icon3 {
    font-size: 32rpx;
  }
  .text14-clz {
    font-size: 34rpx !important;
  }
  .flex17-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #ffffff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 60rpx;
    background-color: #3e3e3e;
    margin-left: 20rpx;
    overflow: visible;
    width: calc(100% - 20rpx - 60rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 20rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .icon4-clz {
    transform: translate(0rpx, -50%) rotate(-30deg);
    color: #3e3e3e;
    top: 50%;
    position: absolute;
    right: -20rpx;
  }
  .icon4 {
    font-size: 32rpx;
  }
  .text16-clz {
    font-size: 34rpx !important;
  }
  .flex15-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #ffffff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 20rpx;
    background-color: #3e3e3e;
    margin-left: 20rpx;
    overflow: visible;
    width: calc(100% - 20rpx - 20rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 20rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .icon2-clz {
    color: #3e3e3e;
    top: -24rpx;
    left: 30rpx;
    position: absolute;
  }
  .icon2 {
    font-size: 32rpx;
  }
  .text13-clz {
    font-size: 34rpx !important;
  }
  .container23285 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .container23285 {
  }
</style>


文章标签：
前端开发
容器
关键词：
CSS样式
CSS圆角
CSS圆角样式
CSS叠加
CSS旋转
diygwcom
目录
相关文章
何雨晨
|
4天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
何雨晨
18 2
六卿
|
21天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS（层叠样式表）的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用，展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS，讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外，还强调了使用`!important`规则时的优先级高于行内样式。
六卿
54 1
html的七十二变
|
1月前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点，适用于不同场景。
html的七十二变
43 13
Li370234940
|
5天前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
Li370234940
18 0
你都不懂
|
1月前
|
前端开发
css ＜样式一＞
css ＜样式一＞
你都不懂
16 1
你都不懂
|
1月前
|
设计模式 移动开发 前端开发
CSS内联样式的使用，吐血整理
CSS内联样式的使用，吐血整理
你都不懂
37 6
六卿
|
23天前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量，来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
六卿
17 0
土木林森
|
2月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘？带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中，高效与可维护性至关重要。JavaServer Faces（JSF）框架通过其面向组件的开发模式，提供了构建复杂用户界面的强大工具，特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观，可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件，并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap，可以进一步丰富组件库，提升用户体验。
土木林森
47 0
天隆金
CSS3 3D旋转下拉菜单
在线演示 本地下载
天隆金
1220 0
游客fz577umxdejsg
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
51 2