border-radius编程练习1-3

我们刚学了圆角的知识，那么我们运用圆角的知识来实现下图所要求的效果：

参考代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>border-radius案例</title>

  <meta name='description' content='border-radius案例'>

  <meta name='keywords' content='border-radius案例'>

  <style>

    /* 此处写代码 */

    div {

      width: 400px;

      height: 300px;

      border: 1px solid red;

      -webkit-border-radius: 20px 10px 60px 10px;

      -moz-border-radius: 20px 10px 60px 10px;

      -o-border-radius: 20px 10px 60px 10px;

      border-radius: 20px 10px 60px 10px;

      margin: 0 auto;

    }

  </style>

  <script>

  </script>

</head>

<body>

  <!-- 此处写代码 -->

  <div></div>

</body>

</html>

border-radius编程练习1-3的更多相关文章

  1. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  2. 为什么要使用sass

    或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...

  3. 前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令

    一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...

  4. 如何高效的阅读uni-app框架？（建议收藏）

    作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,ma ...

  5. 前端Tips#3 - 简写的 border-radius 100% 和 50% 是等效的

    本文同步自 JSCON简时空 - 技术博客,点击阅读 视频讲解 视频地址 文字讲解 1.先讲结论 border-radius 这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角 ...

  6. jquery/zepto 圣诞节雪花飞扬

    下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jque ...

  7. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  8. jQuery实践——属性和css篇

    属性: attr html:<div>demo1</div> jQuery:$("div").attr("id","demo1 ...

  9. Designing for iOS: Graphics & Performance

    http://robots.thoughtbot.com/designing-for-ios-graphics-performance  [原文] In the previous article, w ...

  10. Quartz2D复习（一）--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

    1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core  Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...

随机推荐

  1. (OK) Android内核（4.9）集成最新版MPTCP---成功

    Android内核(4.9)集成最新版MPTCP---成功

  2. dockerfile关键字

    DockerFile关键字(保留字指令) FORM:基础镜像,表明当前镜像是基于那么镜像的 MAINTAINER :镜像维护者的名字和邮箱地址 RUN:容器构建时需要用到的命令 EXPOSE:当前容器 ...

  3. errno线程安全性

    errno errno用于获取系统最后一次出错的错误代码.在C++中,errno其实是宏: // windows #define errno (*_errno()) // linux #define ...

  4. go 结构体与方法

    go 结构体与方法   go 结构体相当于 python 中类的概念,结构体用来定义复杂的数据结构,存储很多相同的字段属性 结构体的定义 1.结构体的定义以及简单实用 package main imp ...

  5. centos 安装docker方法2

    1 更新yum yum -y update 2 执行命令 linux 安装dockersudo wget -qO- https://get.docker.com | sh解释如下sudo 使用root ...

  6. Python-selenium显示等待

    #coding=utf-8 from selenium import webdriver from selenium.webdriver.common.by import By from seleni ...

  7. pybind11和numpy进行交互

    使用一个遵循buffer protocol的对象就可以和numpy交互了.   这个buffer_protocol要有哪些东西呢? 要有如下接口: struct buffer_info { void ...

  8. Java jvm 类加载 反射

    Java 底层 jvm,类加载,反射 Java语言是跨平台语言,一段java代码,经过编译成class文件后,能够在不同系统的服务器上运行:因为java语言中有虚拟机jvm,才有了跨平台,java为了 ...

  9. Java基础之类型转换总结篇

    Java中,经常可以遇到类型转换的场景,从变量的定义到复制.数值变量的计算到方法的参数传递.基类与派生类间的造型等,随处可见类型转换的身影.Java中的类型转换在Java编码中具有重要的作用.    ...

  10. JUC---00创建线程的方式

    一.继承Thread类 1 package com.jenne.mydemo; 2 3 public class TestMyThread { 4 public static void main(St ...