CSS3 border属性的妙用

.ribbon {
        background: #45c9c8;
        position: absolute;
        width: 75px;
        height: 25px;
        line-height: 25px;
        top: -4px;
        left: -11px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        font-style: normal;
        z-index: 1;
        &:after{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 12px solid transparent;
            border-top: 5px solid #329c9b;
            top: 25px;
            left: 0px;
            z-index: 0;
        }
        &:before{
            content: "";
            position: absolute;
            right: -10px;
            font-size: 14px;
            color: #fff;
            z-index: 1;
            width: 0;
            height: 0;
            border-top: 13.5px solid #45c9c8;
            border-left: 5px solid #45c9c8;
            border-right: 10px solid transparent;
            border-bottom: 12.5px solid #45c9c8;
        }
    }

　　利用伪选择器after和before写了一个丝带标签

时间： 2024-10-30 08:21:29

CSS3 border属性的妙用的相关文章

css3 animation 属性众妙

转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需要了解的同学可先移步 MDN),而是结合实际的开发经验,介绍 css3 animation 属性的一些使用场景及技巧. 1. animation-delay MDN 中的介绍: animation-delay CSS 属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度. 该属性值

border属性妙用

以前只知道border属性是盒模型中的边框属性,一直不清楚每个边的border是矩形拼接有重合呢,还是梯形无缝拼接的. border梯形为了观察边框究竟是哪一种拼接方式,为边框设置不同的颜色背景,代码如下: #content{ width: 100px; height: 100px; background: #FFC; border-top: 80px solid #0F0; border-right: 80px solid #09C; border-bottom: 80px solid #9

CSS3：不可思议的border属性

在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替.但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧. 1.正三角形: .triangle_up { height:0px; width:0px; border-bottom:50px solid #006633; border-left:50px solid transparent; border-right:50px solid transparent; }

让IE浏览器支持CSS3圆角属性的方法

如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE9支持CSS3和HTML5的标准.让IE支持CSS3的解析方法有很多种,(HTML5 Shiv – 让该死的IE系列支持HTML5吧)下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言

两点补充——CSS3新属性以及弹性布局

CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩

CSS3 常用属性（三）-- 用户界面、文字、两种盒模型

用户界面--column 关于用户界面,我们先了解一下在块元素中写文字时,浏览器中的呈现情况,这个其实很明显,所有的文本内容会在块元素内从左到右一个个字排列,排满后,从上到下一排排渲染--然而,有些时候,页面需求的呈现方式是,类似于报纸似得,将一段文本内容,分成多列布局显示. 用户界面使用的示例如下: .font{ width:300px; height:300px; border:1px solid #000; margin:0px auto; column-count:3; /* 定义数量

css学习笔记——CSS3 transition 属性

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3 transition 属性</title> <style> .box{ width:100px; height:100px; background:red; -web

纯css3样式属性制作各种图形图标

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

CSS3 box-orient 属性

CSS3 box-orient 属性 CSS 参考手册实例水平排列 div 元素的子元素: div { width:350px; height:100px; border:1px solid black; /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; /* Safari.Opera 以及 Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; /* W