CSS制作类似浏览器标题栏的圆角样式

制作一个类似浏览器标题栏的tab切换效果CSS样式

圆弧的样式由 元素本身 + 左右两个小角 组成

首先，将元素设置 相对定位 + 圆角边框，以及宽高设为：

position: relative;   //相对定位
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #fff;
border-radius: 10px 10px 0 0;   //圆角边框 上边圆角

然后，用到 伪类选择器： :before :after

.corner:before,.corner:after{content: " ";         //伪类选择器的使用，必须加contentposition: absolute;  //设置绝对定位，脱离文档流bottom: 0;          // 定位于底部z-index: 10;       //设置元素的堆叠顺序，必须加z-index，否则会被下一个元素覆盖width: 10px;      //设置宽高height: 10px;
}
.corner:before{ left: -10px;background: url(corner-left.png);
}
.corner:after{right: -10px;background: url(corner-right.png);   //也可使用corner-left.png，加transform:rotate(90deg);旋转
}

我们还需要一张10*10像素的png格式的图片
左边 corner-left.png

右边 corner-right.png

这里我可以教大家使用PS制作10*10像素png格式的图片

CSS制作类似浏览器标题栏的圆角样式相关推荐

CSS制作类似 Photoshop 模糊蒙版效果
CSS制作类似 Photoshop 模糊蒙版效果引言不兼容IE的纯css实现代码实现代码实现原理兼容IE10,IE11的模糊蒙版效果,使用canvas 实现代码实现原理引言为了使一个在 ...
html做图片模糊效果,使用CSS制作跨浏览器的图片模糊效果
在photoshop中,我们要制作一个图片的模糊效果是非常简单的,简单的实用高斯模糊等模糊滤镜就可以完成.现在,我们可以使用CSS和SVG来着网页中实现ps级的模糊效果. 页面中的图片模糊效果不可以滥 ...
HTML CSS 兼容所有浏览器的自定义鼠标样式
2019独角兽企业重金招聘Python工程师标准>>> 自定义鼠标样式,格式: css:{cursor:url('绝对路径的图片(格式:cur,ico)'),-moz-zoom-ou ...
php表格好看样式,怎么用css制作好看的表格？【示例】
本篇文章将要给大家详细介绍如何用css制作出好看又简洁的HTML表格.相信大家在接触过HTML相关知识后,或多或少都会自己写点小代码,写个小效果.就比如table表格,我们在浏览各个网站时,总能看到各 ...
php在dw中设置按钮圆角,Dreamweaver怎么用CSS制作圆角按钮?
Dreamweaver想要制作一个网页中的圆角按钮,并添加鼠标经过时变色的效果,该怎么制作呢?下面我们就来看看详细的教程. 软件名称:Adobe Dreamweaver CC 2018 V18.0 中 ...
html页面的内容外观显示样式,XHTML CSS制作样式风格切换的WEB站点
XHTML CSS制作样式风格切换的WEB站点互联网发布时间:2008-10-17 19:26:50 作者:佚名我要评论随着XHTML的逐渐推广流行,HTML在许多场合已经显得过时 ...
html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下一.横向条纹如下代码:background ...
html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍
这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...

CSS制作类似浏览器标题栏的圆角样式

制作一个类似浏览器标题栏的tab切换效果CSS样式

CSS制作类似浏览器标题栏的圆角样式相关推荐

最新文章

热门文章