边框也是美美哒

马黑黑 · 发表于 2024-2-12 10:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-2-12 10:07

本帖最后由马黑黑于 2024-2-12 10:10 编辑

代码：

<style>
.circle {
	margin: auto;
	width: 160px;
	height: 160px;
	border-style: dotted solid double dashed;
	border-color: red green orange blue;
	border-width: 10px;
	border-radius: 50%;
}
</style>
  
<div class="circle"></div>

马黑黑 · 发表于 2024-2-12 10:09

新版 Edge，Chrome，Firefox 浏览器环境下效果完美

显示全部楼层 · 发表于 2024-2-12 10:32

提示: 作者被禁止或删除内容自动屏蔽

红影 · 发表于 2024-2-12 11:03

的确完美，也顺便学习了线型的设计，这个好

红影 · 发表于 2024-2-12 11:04

border-style: dotted solid double dashed;
给出这个再接着给出边框颜色，它们就老老实实地一一对应呢，真神奇

红影 · 发表于 2024-2-12 11:06

这个涉及了边框的种类、颜色、宽度、半径的设置。学习了

马黑黑 · 发表于 2024-2-12 11:39

醉美水芙蓉发表于 2024-2-12 10:32
欣赏黑黑新款播放器！

这个还木有打算

四海八荒 · 发表于 2024-2-12 11:47

欣赏黑黑新款播放器！

马黑黑 · 发表于 2024-2-12 11:58

本帖最后由马黑黑于 2024-2-12 12:00 编辑

红影发表于 2024-2-12 11:04
border-style: dotted solid double dashed;
给出这个再接着给出边框颜色，它们就老老实实地一一对应呢， ...

边框的基本样式共四种，默认 solid，还有另外三个，dashed，dotted，double，还有一个缺省值 none（不设置边框）

我们过去设置border，多数情况下使用复合写法，一句话解决问题。要精细设置的话，需要分来来写，可以：

① 针对 border-xx 参数

border-style ：值有 solid（默认）, dashed, dotted, double
border-width ：值有 thin, medium（默认）, thick, 数值+单位（例如10px）
border-color ：值为有效的颜色表达式

上述每一个属性均支持多只表达法：

单值：四个边一样【例】border-width: 2px; → 四个边框尺寸均为 2px
双值：上下一样、左右一样，【例】border-color: red blue; → 上下红色，左右蓝色
三值：上、左右、下，【例】border-style: solid double dotted; → 上实线、左右双实线、下小圆点线
四值：上、右、下、左

②分边写

border-top: 1px solid gray;
border-right: thin dotted red;
border-bottom: thick dashed purple;
border-left: medium double yellow;

还有其他写法，可以自行网补

马黑黑 · 发表于 2024-2-12 12:01

四海八荒发表于 2024-2-12 11:47
欣赏黑黑新款播放器！

这个现在不是播放器

小辣椒 · 发表于 2024-2-12 12:49

彩色边框出来了，黑黑的新作

显示全部楼层 · 发表于 2024-2-12 14:00

提示: 作者被禁止或删除内容自动屏蔽

红影 · 发表于 2024-2-12 14:01

马黑黑发表于 2024-2-12 11:58
边框的基本样式共四种，默认 solid，还有另外三个，dashed，dotted，double，还有一个缺省值 none（不设 ...

这个讲解很详细，很有收获

显示全部楼层 · 发表于 2024-2-12 14:02

提示: 作者被禁止或删除内容自动屏蔽

樵歌 · 发表于 2024-2-12 14:43

估计对俺狠有用，到时请红影再改动高和宽，以及上下左右的颜色边框，用来填字，岂不锦上添花鸟。

樵歌 · 发表于 2024-2-12 14:46

红影发表于 2024-2-12 14:01
这个讲解很详细，很有收获

觉得可以用在消寒上，得劳动师妹了，我不知道高和宽乍改，又怎么和原来那个边框代码整合

梦油 · 发表于 2024-2-12 15:09

你为咱们家园的贡献居功至伟。

红影 · 发表于 2024-2-12 15:59

樵歌发表于 2024-2-12 14:46
觉得可以用在消寒上，得劳动师妹了，我不知道高和宽乍改，又怎么和原来那个边框代码整合

这个没法用上去呢，缩小了以后，估计看不出各种线条了呢

马黑黑 · 发表于 2024-2-12 17:16

梦油发表于 2024-2-12 15:09
你为咱们家园的贡献居功至伟。

言重言重

醉美水芙蓉该用户已被删除	发表于 2024-2-12 10:32 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

醉美水芙蓉该用户已被删除	发表于 2024-2-12 14:00 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

醉美水芙蓉该用户已被删除	发表于 2024-2-12 14:02 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

边框也是美美哒

请马上登录，朋友们都在花潮里等着你哦：）

评分

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

缤纷心情

草莓情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

一往情深

心香一瓣

金剪刀

妙笔生花

天长地久

绚丽缤纷

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

花潮版主

青草情怀

男儿情怀

春意盎然

前途似锦