小编Jus*_*ood的帖子

::first-letter 也设置第一个字符的样式

我有这个文本:

但后来我意识到也"有风格。

我尝试使用,::before但这也不起作用:

p::first-letter {
  color: red;
}

p::before {
  content: '"';
}
Run Code Online (Sandbox Code Playgroud)
<p>Welcome!"</p>
Run Code Online (Sandbox Code Playgroud)

我怎么能只设置第一个字母的样式(在干净的代码中)?

html css

6
推荐指数
1
解决办法
85
查看次数

为 div 滚动捕捉,看起来像 HTML 中的 iPhone

我用 HTML 制作了这款 iPhone(请不要注意意大利面条式的代码,它是德文的,如果需要我可以很乐意翻译它):

var time = document.getElementById("time");
    var notification = document.getElementById("notification");
    var notificationHeader = document.getElementById("notificationHeader");
    var notificationDescription = document.getElementById("notificationDescription");
    var verificationCode = Math.floor(1000 + Math.random() * 9000);
    var input = document.getElementById("instagramNumberText");
    var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
    var verificationCodePTag = document.getElementById("verificationCode");
    var instagram = document.getElementById("instagramApp");
    var mail = document.getElementById("mailApp");
    var createAccountButton = document.getElementById("createAccount");
    var createAccountForm = document.getElementById("createAccountForm");
    var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
    var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
    var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
    var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
    var verificationCodeEmail = document.getElementById("verificationCodeEmail");
    var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet"); …
Run Code Online (Sandbox Code Playgroud)

html javascript css scroll-snap

5
推荐指数
1
解决办法
252
查看次数

制作像素化的边界半径

我有一个游戏看起来有点像 1980 年的游戏。我有这个对话框:

#firstPageText {
            width: 300px;
            min-height: 100px;
            border: 2px solid;
            padding: 1em;
            margin: 0;
            position: absolute;
            bottom: 50px;
            left: 50%;
            -ms-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
            font-family: 'Press Start 2P', cursive;
            border-radius: 5px;
        }
Run Code Online (Sandbox Code Playgroud)
<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

<p id="firstPageText">
  This is a test text.
</p>
Run Code Online (Sandbox Code Playgroud)

我想在这个对话框中添加一个边界半径,就像 pokemon 中的那些:

有没有办法实现这种像素化的边界半径,而不是圆形的边界半径?

html css border-radius

5
推荐指数
0
解决办法
68
查看次数

标签 统计

css ×3

html ×3

border-radius ×1

javascript ×1

scroll-snap ×1