<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
width:300px;
height:300px;
border:solid 1px red;
border-top-left-radius:20px;
border-top-right-radius:30px;
border-bottom-left-radius:30px;
border-bottom-right-radius:40px;
box-shadow:10px 10px 10px yellow;
}
</style>
</head>

<body>
<div></div>
</body>
</html>

画一个DIV并给它的四个角变成圆形，且加上阴影的更多相关文章

  1. JavaScript高级 面向对象（1）--添加一个div标签

    说明(2017.3.28): 1. JavaScript是一种基于对象的多范式编程语言,不是面向对象,但离开对象不能活. 范式编程是指编程习惯.方式,分为过程式.对象式和函数式编程. 2. 面向对象是 ...

  2. 如何用css画一个彩虹---v客学院技术分享

    无意间看到了CSS radial-gradient() 函数实现了如下图的样式 仔细一看还真有点像灯光下的鸡蛋,O(∩_∩)O哈哈~ 今天我就来用radial-gradient()函数教大家画一个简单 ...

  3. 用css控制一个DIV画图标。

    在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...

  4. div+css画一个小猪佩奇

    用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...

  5. 一个页面多图表展示（四个div的方式）

    效果如图所示,一个页面四个div,每个div里面展示相应的数据,因为这种效果会有点麻烦,而且不太雅观我就换了一种写法,一个div里面用四个图表,共用一个图例,先放上这个方式的效果图和源码,后期会再发布 ...

  6. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  7. css3简单几步画一个乾坤图

    原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...

  8. Effective前端1---chapter 2 用CSS画一个三角形

    1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...

  9. Effective前端(3)用CSS画一个三角形

    来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...

随机推荐

  1. 工作笔记--自动切换host的python code

    修改host代码: #coding:utf-8import os,timepwd = os.path.dirname(__file__) #获取当前文件夹的绝对路径pull_host_cmd = 'a ...

  2. mysql有多条记录的单个字段想存为一个字段显示的方法

    SELECT po.id,(SELECT GROUP_CONCAT(mr.member_type) as memberTypeList FROM prod_offer_member_rel mr WH ...

  3. 写好Java代码的30条经验总结（转）

    成为一个优秀的Java程序员,有着良好的代码编写习惯是必不可少的.下面就让我们来看看代码编写的30条建议吧. (1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符,其中 ...

  4. ARM平台的虚拟化介绍

    本篇博文主要介绍虚拟化的基本思想以及在arm平台如何做虚拟化,arm提供的硬件feature等等. 虚拟化技术简介 虚拟化技术 虚拟化是一个概念,单从这个概念的角度来看,只要是用某一种物品去模拟另一种 ...

  5. 回归模型效果评估系列1-QQ图

    (erbqi)导语 QQ图全称 Quantile-Quantile图,也就是分位数-分位数图,简单理解就是把两个分布相同分位数的值,构成点(x,y)绘图:如果两个分布很接近,那个点(x,y)会分布在y ...

  6. 初识Vue——模板语法

    一.插值 1.文本 数据绑定最常见的形式是使用双大括号({{  }}--"Mustache"语法)的文本插值 <div class="mustache"& ...

  7. Asp.Net Core 2.1+的视图缓存(响应缓存)

    响应缓存Razor 页与 ASP.NET 核心 2.0 中不支持. 此功能将支持ASP.NET 核心 2.1 版本. 在老的版本的MVC里面,有一种可以缓存视图的特性(OutputCache),可以保 ...

  8. 软AP的实现------dhcpserver交叉编译

    代码版本:dhcp-4.2.5-P1 cd dhcp--P1; ./configure --host=arm-XXX-linux ac_cv_file__dev_random=yes; cd ./bi ...

  9. ORA-04028: cannot generate diana for object xxx

    在ORACLE数据库(10.2.0.5.0)上修改一个包的时候,编译有错误,具体错误信息为"ORA-04028: cannot generate diana for object xxx&q ...

  10. 2.4 PCI总线的配置

    PCI总线定义了两类配置请求,一个是Type 00h配置请求,另一个是Type 01h配置请求.PCI总线使用这些配置请求访问PCI总线树上的设备配置空间,包括PCI桥和PCI Agent设备的配置空 ...