广告位联系
返回顶部
分享到

css实现四角边框效果介绍

css 来源:互联网 作者:佚名 发布时间:2024-09-24 21:44:38 人浏览
摘要

css实现四角边框 html: 1 2 3 4 5 6 7 8 div class=box v-for=(item, index) in coldBaseInfo.stationModelList :key=index div class=boxleft img :src=photo[index] alt=Image / /div vue2: 1 2 3 4 5 6 photo: [ require(@/assets/img/bigscreen/two.jpg),

css实现四角边框

 html:

1

2

3

4

5

6

7

8

<div

         class="box"

         v-for="(item, index) in coldBaseInfo.stationModelList"

         :key="index"

       >

         <div class="boxleft">

           <img :src="photo[index]" alt="Image" />

         </div>

vue2:

1

2

3

4

5

6

photo: [

      require("@/assets/img/bigscreen/two.jpg"),

      require("@/assets/img/bigscreen/four.png"),

      require("@/assets/img/bigscreen/five.jpg"),

      require("@/assets/img/bigscreen/ten.jpg"),

    ],

css:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.boxleft {

  background: linear-gradient(to left, #04C886, #04C886) left top no-repeat,

        linear-gradient(to bottom, #04C886, #04C886) left top no-repeat,

        linear-gradient(to left, #04C886, #04C886) right top no-repeat,

        linear-gradient(to bottom, #04C886, #04C886) right top no-repeat,

        linear-gradient(to left, #04C886, #04C886) left bottom no-repeat,

        linear-gradient(to bottom, #04C886, #04C886) left bottom no-repeat,

        linear-gradient(to left, #04C886, #04C886) right bottom no-repeat,

        linear-gradient(to left, #04C886, #04C886) right bottom no-repeat;

    background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;

  img {

    width: 100%;

    height: 100%;

    padding: 4px;

    border: 2px solid #7fb1c580;

  }

}


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • CSS使用filter和backdrop-filter实现高斯模糊效果

    CSS使用filter和backdrop-filter实现高斯模糊效果
    今天接到一个需求是,使用高斯模糊的效果对一个页面进行模糊处理,正好借这个机会来整理一下 css3 中高斯模糊的两个 API API介绍 filter 说
  • css实现四角边框效果介绍

    css实现四角边框效果介绍
    css实现四角边框 html: 1 2 3 4 5 6 7 8 div class=box v-for=(item, index) in coldBaseInfo.stationModelList :key=index div class=boxleft img :src=photo[index] alt=Image / /div
  • CSS图片铺满div的实现方法
    第一种结构:图片是子元素 1 2 3 div img src=引入图片地址 alt= class=Img /div 方法一:img元素添加 object-fit:cover 1 2 3 4 5 6 7 8 9 div{ width: 500px; heigh
  • css边框修饰的实现

    css边框修饰的实现
    一、设置线条样式 通过border-style属性设置,可选择的一些属性如下: dotted:点线 dashed:虚线 solid:实线 double:双实线 效果如下: 二、设
  • CSS中:required和:optional伪类:增强表单字段的视觉
    在网页设计中,表单是用户与网站交互的重要元素之一。为了提升用户体验并引导用户正确填写表单,开发者需要清晰地标识出哪些字段是
  • 使用CSS3进行样式效果增强
    使用CSS3进行增强 滑过文字渐变 1 2 3 4 5 6 /* 这段代码实现了当鼠标滑过链接时的渐变效果 */ a { color: #007c21; transition: color .4s ease; } a:hover {
  • 利用CSS实现视差滚动和抖动效果

    利用CSS实现视差滚动和抖动效果
    前端的设计效果,越来越炫酷,而这些炫酷的效果,利用css3的动画效果和js就可以实现,简单的代码就能实现非常炫酷的效果。 原理:利用
  • CSS文本超出后隐藏并显示省略号及其他浏览器兼
    1、只显示一行文字后隐藏并省略 1 2 3 4 5 6 7 // 只显示一行文字后省略 .element { width: 300px; /* 需要设置一个固定宽度 */ white-space: nowrap; /* 强制
  • css3实现动态滚动播放列表功能

    css3实现动态滚动播放列表功能
    需要自动滚动循环播放的列表,使用纯CSS实现基础循环功能 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .messages animation-name carousel animation-timing-
  • CSS3边框样式(包含border-radius、border-image与box-sha

    CSS3边框样式(包含border-radius、border-image与box-sha
    CSS3 边框样式 border-radius 作用:设置圆角 值的个数及其效果 简记:左上开始顺时针,值不够的对角来凑。 值的个数 效果 1 四个角一致 2 左
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计