<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    div {

        position: relative;

        left: 50px;

        top: 50px;

        margin: 10px;

        width: 500px;

        height: 100px;

        border: 1px solid #E3581D;

    }

    .border {

        position: absolute;

        padding: 5px;

        border-style: solid;

        border-color: #E3581D;

    }

    .row1 {

        border-width: 5px 0 0 5px;

        top: -5px;

        left: -5px;

        border-radius: 4px 0 0 0;

    }

    .row2 {

        border-width: 5px 5px 0 0;

        top: -5px;

        right: -5px;

    }

    .col1 {

        border-width: 0 0 5px 5px;

        bottom: -5px;

        left: -5px;

    }

    .col2 {

        border-width: 0 5px 5px 0;

        bottom: -5px;

        right: -5px;

    }

    </style>

</head>

<body>

    <div>

        <span class="border row1"></span>

        <span class="border row2"></span>

        <span class="border col1"></span>

        <span class="border col2"></span>

    </div>

</body>

</html>

css 四周边框角加粗效果的更多相关文章

  1. NGUI的字体加粗效果

    ngui的UILabel可以通过属性面板(inspector)设置字体的样式:加粗 倾斜 正常等. 但是如果通过这里设置了加粗,与实际的加粗不一样,ngui有一个拉伸宽度的变化. 这让人觉得很丑 .如 ...

  2. 运用CSS高斯模糊添加图片加载效果

    <!DOCTYPE html> <html> <head> <title>大图片加载从模糊到清晰</title> </head> ...

  3. CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框

    本文将通过一个实际的业务需求,讲解如何实现 极端场景下文字加粗加边框效果 文字多重边框的效果 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题: 在文字展示的时候,利用了 font-weig ...

  4. word中几个好用的宏代码（立方米上标、关闭样式自动更新、删除无效样式、表格加粗边框、宋体引号）

    Sub 替换立方米() With Selection.Find .Text = "m3" .Replacement.Text = "mm3" .Forward ...

  5. html字体加粗标签与写法

    在html中字体加粗的标签为<b>标签,当我们使用了该标签,字体就会加粗,一般用于注明重要信息,强调文字上面写法如下 字体加粗:<b>这里的字体就会加粗</b> 效 ...

  6. jquery 页面加载效果

    30个jquery 页面加载效果 30个jquery 页面加载效果   30 CSS Page Preload Animations   加载效果列表 Square Animations Demo 1 ...

  7. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  8. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  9. php原生PHPExcel插件导表（附表格合并，加粗居中及加边框换行操作）

    PHPExcel是用来操作Office Excel文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可以使用它来读取.写入不同格式的电子表格,如 Excel(BIFF) .xls, E ...

随机推荐

  1. FineReport启动后访问404

    近期将FineReport以嵌入式方式部署在Tomcat8上,启动服务后,点击导出下载出现HTTP ERROR 404情况: 百思不得其解啊,纠结了好几天: 后查看原部署Tomcat6服务器的cata ...

  2. 在C++98基础上学习C++11新特性

    自己一直用的是C++98规范来编程,对于C++11只闻其名却没用过其特性.近期因为工作的需要,需要掌握C++11的一些特性,所以查阅了一些C++11资料.因为自己有C++98的基础,所以从C++98过 ...

  3. 许式伟：我与Go语言的这十年[转]

    2017-12-18 许式伟 Go中国 2007 年 9 月 20 日,关于设计一门全新语言的讨论正式开始,这门全新的语言,就是后来的 Go.时至今日,Go 语言已经发布到 1.9 版本,走过了整整十 ...

  4. Kali Linux远程连接Windows服务器

    前言: 为了在Kali上远程连接Windows系统的服务器我们需要安装两个工具,rdesktop和tsclient.另外,我们从主机服务商那里购买的Windows操作系统的服务器都是默认开启了远程连接 ...

  5. CMD命令锦集

    虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一般Windows 的各种版本都与其兼容,用户可以在Wi ...

  6. tkinter中menu菜单控件（十二）

    menu菜单控件 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("300x200 ...

  7. 深浅拷贝，原生和JQuery方法实现

    7-17: 1:e.target.parentNode.remove();成功,查询一下JS原生的remove方法 2:复习JS DOM的原生操作方法,比如innerHTML(),insertBefo ...

  8. canvas绘制形状

    栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0) ...

  9. Java 读书笔记 (十六) Java 继承

    例: 开发动物类,其中动物分别为企鹅以及老鼠,要求如下: 企鹅: 属性(姓名,id), 方法(吃,睡,自我介绍) 老鼠: 属性(姓名,id), 方法(吃,睡,自我介绍) 企鹅类: public cla ...

  10. 如何把word中的图片怎么导出来呢？

    在办公使用word的过程中你可能经常会遇到这个问题:插入到word中的图片找不到导出来的方法,是不是很郁闷呢,别急,今天咱们研究一下把word中的图片导出来的方法(把"我的"变成你 ...