css如何实现这样的样式:

解决方案:
  • 这里需要用到的技术是border-image的灵活运用,首先需要一张图片,这里我选中的是这样子的,此后 的图片可以拿这个更改圆形的颜色以更改锯齿颜色:

  底部透明,正方形,ps截图如下:

好了,下面咱们就开始真正的代码:

html:
<section class="ele-card">
<div class="ele-card-borderImage"></div>
</section>
css:
.ele-card{
height: 130px;
width: 70%;
position: absolute;
z-index:;
top: 26%;
left: 50%;
margin-left: -35%;
background: #fee94e;
}
.ele-card-borderImage{
border-top: 15px solid transparent;
border-image: url(../img/order_border-min.png) 111 44 round;
width: 100%;
position: relative;
top: -4px;
}

二十三、css如何实现锯齿形---border-image的更多相关文章

  1. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...

  2. Bootstrap <基础二十三>页面标题(Page Header)

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  3. 前端二:CSS

    CSS: 一:介绍:学名层叠样式表(Cading Style Sheets)是一种用来表现HTML或者XML等文件的样式的计算机语言.让HTML和XML看起来更加美观. 语法:<style> ...

  4. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  5. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  6. Bootstrap入门(二十三)JS插件1:模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  7. 二丶CSS

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 二.css的 ...

  8. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

  9. [html]CSS中的margin、border、padding区别

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

随机推荐

  1. php 图片上传 并返回上传文件位置 支持多文件上传

    <?php /** * Created by PhpStorm. * User: DY040 * Date: 2018/4/26 * Time: 13:23 */ echo '<pre&g ...

  2. python pandas使用chunksize异步拆分固定行数的文件

    import pandas as pd import asyncio from collections import defaultdict collect = defaultdict(list) # ...

  3. mojing SDK根据坐标进行移动

    using UnityEngine; using UnityEngine.UI; using System.Collections; public class transforms : MonoBeh ...

  4. CentOS6.5安装testlink1.9.14

    前提条件:准备一台CentOS6.5虚拟机,配置好IP,关闭iptables和selinux. 这里提供上我的云盘软件,可以去这里下载:http://pan.baidu.com/s/1qXymele ...

  5. Vue vs React: Javascript 框架之战

    https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc    原文档 正如我们之前提到的,Word ...

  6. 通过overflow: scroll;来实现部分区域的滚动

    在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现. 比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚 ...

  7. mysql 导入 excel 数据

    客户准备了一些数据存放在   excel 中, 让我们导入到 mysql 中.先上来我自己把数据拷贝到了 txt 文件中, 自己解析 txt 文件,用 JDBC 循环插入到数据库中. 后来发现有更简单 ...

  8. Unity5.x在mac下的破解

    工具下载 http://www.ceeger.com/forum/read.php?tid=23396&uid=24111 破解unity5.x版本亲测有效 但是他的说明不详细 下载后,里面有 ...

  9. nginx配置服务器负载均衡

    upstream servers { ip_hash; #hash,ip轮训 server localhost:8400; } server { listen 80; server_name loca ...

  10. PHP多维数据排序(不区分大小字母)

    1. PHP中最普通的数组排序方法 sort(); 看个例子: <?php $test = array(); $test[] = 'ABCD'; $test[] = 'aaaa'; $test[ ...