css 不规则边角_如何实现带有边角的CSS边框

以下是完整代码,拷贝到编辑器即可使用

html>

带四角的边框

body {

background: #00AB68;

text-align: center;

}

#box {

position: relative;

margin: 120px auto;

width: 400px;

height: 100px;

font-family: KaiTi;

font-size: 18px;

line-height: 100px;

font-weight: bold;

color: #fff;

}

.content {

position: absolute;

width: 100%;

height: 100%;

border: 1px solid #c0c0c0;

}

.content > div {

position: absolute;

width: 10px;

height: 10px;

}

.lt {

left: -3px;

top: -3px;

border-top: 3px solid #c0c0c0;

border-left: 3px solid #c0c0c0;

}

.rt {

right: -3px;

top: -3px;

border-top: 3px solid #c0c0c0;

border-right: 3px solid #c0c0c0;

}

.rb {

bottom: -3px;

right: -3px;

border-bottom: 3px solid #c0c0c0;

border-right: 3px solid #c0c0c0;

}

.lb {

bottom: -3px;

left: -3px;

border-bottom: 3px solid #c0c0c0;

border-left: 3px solid #c0c0c0;

}

人间四月芳菲尽,山寺桃花始盛开。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/558143.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux more 命令使用介绍

文章目录1.命令格式2.命令功能3.命令参数4.常用操作(键盘按键)命令5.示例1显示文件中从第3行起的内容2从文件中查找第一个出现”hello3“字符串的行,并从该处前两行开始显示输出3设定…

Linux less 命令使用介绍

文章目录1.命令格式2.命令功能3.命令参数4.按键操作5.示例1、查看文件内容2、ps查看进程信息并通过less分页显示3、查看命令历史使用记录并通过less分页显示5、浏览多个文件5.附加备注less命令也是对文件或…

python中的reindex_Pandas之ReIndex重新索引的实现

约定:import pandas as pdimport numpy as npReIndex重新索引reindex()是pandas对象的一个重要方法,其作用是创建一个新索引的新对象。一、对Series对象重新索引se1pd.Series([1,7,3,9],index[d,c,a,f])se1代码结果:d 1c 7a 3f 9…

Linux head/tail 命令使用介绍

文章目录1.命令格式2.命令功能3.命令参数headtail4.使用实例1:head显示文件的前n行2:head显示文件前n个字节3:head文件的除了最后n个字节以外的内容4:head输出文件除了最后n行的全部…

djpython教程_简单介绍Python的Django框架的dj-scaffold项目

由于Django没有象rails一样指定项目的目录结构规范,很多人都对django项目的目录结构要如何组织而感到困惑。为此我又新创建了一个开源项目dj-scaffold(django的脚手架)。这个项目用于自动生成一个标注化的django项目和app。项目地址:https://github.com/…

Linux cp 命令使用介绍

文章目录1.命令格式及用法2.命令功能3.命令参数4.示例一:复制单个文件到目标目录,文件在目标文件中不存在二:目标文件存在时,会询问是否覆盖三:复制整个目录命令执行演示…

Linux ps 命令使用介绍

文章目录前言Linux上进程有5种状态ps工具标识进程的5种状态码命令格式命令功能命令参数示例1:显示所有进程信息2:显示指定用户信息3:显示所有进程信息,连同命令行4: ps 与grep 常用组合用法,查找特定进程5&…

字符串去重_文件数据去重示例

【摘要】本文介绍小文件与大文件在进行数据去重时的几种处理办法,比如按整行或关键列去除重复数据或留下重复数据,并用 esProc SPL 举例实现。请点击文件数据去重示例了解详情在数据处理业务中,有时需要清除文件中的重复数据或只留下重复数据…

Android 11判断应用已安装坑点

文章目录Android 11 wxApi.isWXAppInstalled() 返回false解决办法1、在清单文件的添加queries标签2、增加权限3、app的targetSdkVersion 改为29原因与说明Android 11 获取已安装app列表问题Android 11 应用可见性官方说明特定软件包名称在库中与托管应用通信与 intent 过滤器签…

python推导式多行书写_python三种推导式的详细介绍及其应用示例,强调字典推导的重要性...

前言列表推导式构建列表的快捷方式,而生成器表达式则可以用来创建其他任何类型的序列。自python2.7以后,列表推导和生成器表达式的概念就应用到了字典上,所以就有了字典推导,以后我们还会遇到集合推导(此处暂不讨论)。因此&#x…

Linux watch命令使用介绍

文章目录1.命令格式2.命令功能3.命令参数4.示例1:每隔一秒高亮显示网络链接数的变化情况2:每隔一秒高亮显示http链接数的变化情况3:实时查看模拟攻击客户机建立起来的连接数4:监测当…

php7 setcookie无效_php COOKIE介绍和setcookie有时会在ie下失效问题

建立商业站点或者功能比较完善的个人站点,常常需要记录访问者的信息,在PHP中提供了两种方便的手段:session和cookie功能.为了永久的保持用户信息,则cookie是最便捷的手段.在这里我将为大家详细的讲解cookie的功能及使用方法.一: 设置cookie使…

Linux at命令使用介绍

目录1.命令格式2.命令功能3.命令参数4.示例1:三天后的下午 5 点执行 /bin/ls2:明天17点钟,输出时间到指定文件3:计划任务设定后,在没有执行之前,用atq命令来查…

arm ubuntu 编译boost_使用yocto工具编译qt5.9.6总结

运行平台:OKMX6DL-C编译平台:Ubuntu 14.04.6 LTS编译工具:arm-poky-linux-gnueabi-gcc(gcc version 5.3.0 (GCC) )qt源码:qt-everywhere-opensource-src-5.9.6.tar.xz参考:嵌入式开发之Qt-5.9.6…

Linux crond命令使用介绍

目录前言一、crond简介系统任务调度用户任务调度二、crond服务三、crontab命令详解1.命令格式2.命令功能3.命令参数4.常用方法1). 创建一个新的crontab文件2). 列出crontab文件3). 编辑crontab文件4). 删除crontab文件5). 恢复丢失…

Android App屏幕旋转要点

文章目录前言屏幕旋转“预热”android:screenOrientationandroid:configChangesAcitvity onConfigurationChanged(newConfig: Configuration?)代码控制方向跟随系统重力感应总结前言 关于app横竖全屏切换,大多数属于音视频播放类app,电子书、文档类的应…

HTML静态页面获取url参数和UserAgent

目录前言原因解决1、静态页面获取url的参数2、取useragent的值3、测试页面前言 接技术支持小伙伴信:有用户反馈app在华为设备上下载不了,以为是服务器覆盖的范围不够或服务器挂了,直到另一个客服同事发来一个录屏,基本知道原因&a…

python mad函数_Python函数的基本定义

老男孩教育的PYTHON自动化开发课程自2013年第1期到现在已经走到了第12期,2年半的时间里,我们每一期都在对课程细节进行不同程度的优化,课程总时长也从最开始的2个月延长至第12期的五到六月,更新内容足足翻了一倍多,我们…

Linux grep命令使用介绍

目录1.命令格式2.命令功能3.命令参数4.正(规)则表达式5.示例1:查找指定进程2:查找指定进程个数3:从文件中读取关键词进行搜索4:从文件中读取关键词…

Android手机或平板设置浏览器的UserAgent

目录前言修改UserAgent实操华为手机自带浏览器Chrome(谷歌浏览器)QQ浏览器UC浏览器360浏览器前言 移动互联网盛行的当下,网页在电脑端和移动设备(包括手机,平板以及一些基于Android系统定制的设备)的适配主…