介绍背景图片:,径向渐变(200 px at 50 px 0 px,, # fff 50 px,, # 4169 e1 50 px); .notice_box_cls # commonNotice {
background - color,,,,, # E8F7F2;
,,,填充:,20 px 10 px;
}
.notice_box_cls .notice_body0 {
,,,位置:,相对;
}
.notice_box_cls .notice_body {
,,,背景:径向渐变(15 px at left , # fff 50 px, # E8F7F2 50%);
,,,位置:,绝对;
,,,左:,0;
,,,:,0;
,,,宽度:,15 px;
,,,身高:,15 px;
}
.notice_box_cls .notice_body1 {
,,,背景:径向渐变(15 px at right , # fff 50 px, # E8F7F2 50%);
,,,位置:,绝对;
,,,右:,0;
,,,:,0;
,,,宽度:,15 px;
,,,身高:,15 px;
}
.notice_box_cls .notice_body2 {
,,,背景:径向渐变(15 px at right 底部,# fff 50 px, # E8F7F2 50%);
,,,位置:,绝对;
,,,左:,0;
,,,底部:,0;
,,,宽度:,15 px;
,,,身高:,15 px;
:,,,变换,旋转(90度);
}
.notice_box_cls .notice_body3 {
,,,背景:径向渐变(15 px at left 底部,# fff 50 px, # E8F7F2 50%);
,,,位置:,绝对;
,,,右:,0;
,,,底部:,0;
,,,宽度:,15 px;
,,,身高:,15 px;
:,,,变换,旋转(270度);
html:} & lt; div 类=皀otice"比;
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; div 类=?“在
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; div 类=皀otice_title"比;
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; span>通知公告& lt;/span>
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt;/div>
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; div 类=皀otice_body0"比;
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; ul id=癱ommonNotice"比;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下css如何实现div内凹角样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
平常的开发中我们一般使用到圆角都是外凸的,即border - radius属性。而如果有内凹角的情况,我们一般的考虑实现方法有2种,一种是直接使用背景图片,一种是使用css。
用到的属性则是背景或背景图像结合径向渐变径向渐变。示例:
而对于径向渐变,主要是3个参数控制。
一个是原点和大小。大小类似border - radius的感觉,原点使用在表示可以指定点的坐标,或使用左,右,顶部,底部来表示。
其次是两个颜色和透明度,大小等。这里50 px或百分比,亲测第一个只有50才是半圆角,而第二个50 px貌似影响不大。
示例:
欲实现图中浅绿色的四角内凹样式,没有素材图片。
开始:首先给这个div设置好宽高并设置相对定位。然后在其内部放4个绝对定位的元素,设置其宽高等于内凹的尺寸,之后将他们绝对定位固定到4角,然后就是使用上边的内凹样式。
需要注意的是,上边两个很简单就完成了,但是下边两个角,只设置了位置和内凹位置之后是下边这样的:
这就需要再旋转一下。
完整代码如下:css:
